Website verzerrt sich immer

PCPlayer

Hallo,
ich habe heute eine neue Website programmiert und jetzt habe ich ein Problem:

Minimiert sieht alles wunderbar aus , aber wenn ich es maximiere ist alles verbuggt. Der Ort vom Button ändert sich und etc.
Unten seht ihr den CSS von einem Button was sich auch verbuggt.

Code

.fu {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #2980b9;
  border: 0;
  border-bottom: 2px solid #2475ab;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #2475ab;
  box-shadow: inset 0 -2px #2475ab;
}
.fu:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
#fu {
margin-left: 487px;
float: center;
margin-top: -61px;
width: 28%;
}

Alles anzeigen

MfG

prof. dr. dr. med. dude

Ein Screen oder eine kleine Livedemo könnten uns dabei helfen dein Problem zu lösen

PCPlayer

Ja also unten seht ihr ein Bild.
Wenn es maximiert wird seht ihr, dass es sehr komisch aussieht.

**Musti**

Zeig mal deine kompletten CSS Codes.
Gruß, MustiFreak

PCPlayer

Code

.header {
	text-align: center;
	font-size: 70pt;
	font-family: Arial;
	}




.startseite {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #2980b9;
  border: 0;
  border-bottom: 2px solid #2475ab;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #2475ab;
  box-shadow: inset 0 -2px #2475ab;
}


.startseite:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}


#startseite {
margin-left: 0px;
float: left;
margin-top: 0px;
width: 28%;
position:fixed;


}


.footer {
	color: #FFFFFF;
}




.fu {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #2980b9;
  border: 0;
  border-bottom: 2px solid #2475ab;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #2475ab;
  box-shadow: inset 0 -2px #2475ab;
}


.fu:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}


#fu {
margin-left: 261px;
float: center;
margin-top: 0px;
width: 28%;
position:fixed;


}




.team {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #2980b9;
  border: 0;
  border-bottom: 2px solid #2475ab;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #2475ab;
  box-shadow: inset 0 -2px #2475ab;
}


.team:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}


#team {
margin-left: 539px;
float: right;
margin-top: 0px;
width: 28%;
position:fixed;


}


a {
  color: #222222;
  text-decoration: none;
}


a:hover {
  text-decoration: underline;
}

Alles anzeigen

higoka

Änder überall position: fixed; zu position: absolute;

PCPlayer

Hat leider nicht geholfen @Scrow.

Ich bitte noch um Hilfe

higoka

Hast du ein livedemo?

PCPlayer

Leider noch nicht

higoka

Zeig mal dein HTML

PCPlayer

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta content="de" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" href="styles.css"> </link>
<title>Test</title>
<p class="header" style="height: 116px">Test</p>
</head>




<body style="background-image: url('test%20Header.jpg')">


<div id="startseite">
      <a href="" target="_blank">
        <input type="submit" value="Startseite" class="startseite">   </input>
      </a>
    </div>
<div id="fu">
      <a href="" target="_blank">
        <input type="submit" value="Gruß&Wunschbox" class="fu">   </input>
      </a>
    </div>	
<div id="team">
      <a href="" target="_blank">
        <input type="submit" value="Unser Team" class="team">   </input>
      </a>
    </div>






</body>


<footer>
<div style="width: 800px; margin: auto; padding: 0 5px 20px 5px; font-size: 10px; text-align: center; color: #D6D6D6; ">Lalalala</div>
</footer>




</html>

Alles anzeigen

Hier der HTML Code

higoka

Mach eine <ul> für die Navigation.

z.B. so:

Code

<style>


  body {
    background: red;
  }


  ul {
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }


  ul > li {
    display: inline-block;
    float: left;
  }


  ul > li > a {
    line-height: 30px;
    color: #fff;
    padding: 20px;
    margin: 20px;
    background: blue;
  }


</style>


<ul>
  <li><a href="#">Tab 1</a></li>
  <li><a href="#">Tab 2</a></li>
  <li><a href="#">Tab 3</a></li>
</ul>

Alles anzeigen

PCPlayer

VIELEN DANK FÜR DEINE HILFE @Scrow.

Ich habe eine Frage,
mit welchem Programm kann ich solche Probleme beheben? Also ein Programm womit man HTML und CSS programmieren kann per Grafische Oberfläche?

higoka

Ich verwende Atom vom Github, ist kostenlos.
https://atom.io

PCPlayer

Atom hat ja keine Grafische Oberfläche, also mit grafische Oberfläche meine ich so ein Programm wo man oben sozusagen den HTML + CSS Code sieht und unten die Website ganz normal

higoka

Wenn du Chrome verwendest, kannst du F12 drücken

PCPlayer

Ist Dreamweaver ein gutes Programm?

higoka

Kp würde lieber Atom oder Sublime nutzen.

**FileX**

Dreamweaver ist ein gutes Programm und sogar noch effizient. Wenn du einen Code schreibst, vervollständigt er sich sogar. Besonders hilfreich bei Div oder längeren HTML Codes. Dennoch empfehle ich Brackets als allgemeinen Editor. Sonst Notepad++

PCPlayer

Och Gott, jetzt öffne ich die Website auf meinem PC (größerer Monitor) als beim Laptop und die Website ist wieder total verzerrt:

Code

.header {
	text-align: center;
	font-size: 70pt;
	font-family: Vijaya;
	}


	
  body {
    background: red;

  }


 li {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #2980b9;
  border: 0;
  border-bottom: 2px solid #2475ab;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #2475ab;
  box-shadow: inset 0 -2px #2475ab;
}


li:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
} 






    ul {
    width: 30%;
    margin: 0 auto;
	margin-left: 272px
    padding: 0;
  }


  ul > li {
    display: inline-block;
    float: left;
  }


a {
  color: #222222;
  text-decoration: none;
}


a:hover {
  text-decoration: underline;
}

Alles anzeigen

Jetzt mitmachen!