stabiles htm Layout für gängige Browser

FritzvK

gibt es ein gutes "How to" wie man ein für alle gängigen Browser und Bildschirmformatunabhängig ein stabiles Layout codieren kann - meins verschiebt sich auf jedem browser / Bildschirm .

Freue mich auf eine Hilfestellung

threadi

CSS lernen und verstehen wäre die beste Voraussetzung. Außerdem sollte dir bewusst sein, dass Du nicht mit Bildschirmauflösungen/-formaten arbeitest sondern mit Viewports. Für diese kannst Du per mediaQueries für unterschiedlichste Viewports auch unterschiedliche Ansichten deiner Seite bauen. Such mal danach im Netz, gibt genug Anleitungen und Hilfen dazu.

FritzvK

ich habe die Formatierung per css gemacht und an meinem Mac book air sieht das ganze auch gut aus. Die dropdown menus im header und footer funktionieren und es bleibt das Problem mit der Verschiebung des Layouts an anderen PCs sowie die Klärung wie ich den Bereich ziwschen header und footer - in dem mein verlinkter Text erscheinen soll - codiert werden muss, damit die Textstellen per Linkanker in den sichtbaren Ausschnitt scrollen.
hier sist die CSS Codierung

Gastl

Zitat von FritzvK

hier sist die CSS Codierung

body {
background-color: #E7EADB;
margin-top: 0%;
margin-right: 20%;
margin-bottom: 5%;
margin-left: 20%;
}
usw.

Alles anzeigen

Was sollen wir damit?
Außerdem gibt es dafür

Code

...

FritzvK

sorry - hab mit dem button code nichts anfangen können.

es geht um die positionsangaben des Layout die ich mittels div ids in css festlegen will -
könntet ihr einen blick darüber werfen und event mir sagen was ich falsch mache.

Code

body {
background-color: #E7EADB;
margin-top: 0%;
margin-right: 20%;
margin-bottom: 5%;
margin-left: 20%;
}
h2 {
font-family: calibri, Arial, Helvetica;
font-variant: small-caps;
font-weight: bold;
font-size: 100%;
color: #00FD00;
}
h3 {
font-family: calibri, Arial, Helvetica;
font-variant: normal;
font-weight: bold;
font-size: 80%;
color: #00FD00;
}
h4 {
font-family: calibri, Arial, Helvetica;
font-variant: normal;
font-weight: bold;
font-size: 60%;
color: #00FD00;
}
h5 {
font-family: calibri, Arial, Helvetica;
font-variant: normal;
font-style: oblique;
font-size: 110%;
color: #404040;
text-align: center;
padding-top: 2%;
}
h6 {
font-family: calibri, Arial, Helvetica;
font-variant: normal;
font-style: oblique;
font-size: 80%;
color: #404040;
text-align: center;
padding-top: 4%;
}
#Bereich-Kopf {
background-color: #404040;
margin-top: 50px;
width: 100%;
height: 170px;


}
#Bereich-Kopf-1 {
padding: 20px 20px ;
float: left;
width: 100px;
}
#Bereich-Kopf-2 {
padding: 20px 20px ;
float: left;
width: 300px;
}
#Bereich-Kopf-3 {
padding-top: 1%;
padding: 20px 20px ;
position:relative;
left: 200px;
width:150px;
}
#Bereich-Kopf-4 {
padding: 0% 0% ;
position: relative;
left: 10%;
Top: -20%;
}
#Bereich-Kopf-5 {
background-color: #C0C0C0;
margin-top: 1%;
width: 100%;
padding: 0% 0% ;
position: relative;
left: 0%;
Top: -0%;
}
#Bereich-Register-Kopf {
float: none;
}






h1 {
font-family: calibri, Arial, Helvetica, Andele monospace;
font-variant: small-caps;
font-weight: bold;
font-size: 130%;
color: #008000;
}


a:link {
font-family: calibri, Arial, Helvetica;
font-variant: normal;
font-weight:200;
font-size: 90%;
text-decoration:none;
color: #400000
}
a:hover {
font-family: calibri, Arial, Helvetica;
font-variant: normal;
font-weight:500;
font-size: 90%;
text-decoration:none;
color: #FF8000
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: white;
text-decoration:none;
}
li {
margin-top: 5px;
margin-bottom: 5px;
list-style-type: none;
}
#Bereich-Kopf-reg {
background-color:;
margin-top: 0%;
margin-left: 0%;
width: 100%;


}
#menu {
font-size:14px;
position:absolute;
}
#menu ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}
#menu li.topmenu {
float:left;
}
.topmenu a {
float: left;
width:200px;
text-align:center;
}
.topmenu ul{
display:none;
}
.topmenu a, .submenu a{
padding:0px 5px;
border-collapse:collapse;
background-color: #C02340;
color:#400040;
font-weight:bold;
text-decoration:none;
text-align:center;
background-color:;
margin:0;
}
.submenu a{
font-size:12px;
width:210px;
position:relative;
clear:both; /* special IE6 */
}
#menu a:hover, .topmenu.on a {
color:#FF8000;
font-family: calibri, Arial, Helvetica;
font-variant: normal;
font-weight:500;
font-size: 90%;
text-decoration:none;
color: #FF8000;
}


.topmenu:hover ul {
display:block;
z-index:500;
float: none;
}
#mainframe {
position: relative;
margin-top: 3%;
width:100%;
scrollbar-track-color: #00FD00;
border: #0000FF;
}
#Bereich-Register-bottom {
background-color:;
margin-top: 380px;
margin-left: 0%;
width: 100%;


}
#menubot {
font-size:14px;
position:absolute;
}
#menu li.topmenubot {
float:left;
}
.topmenubot a {
float: left;
width:200px;
text-align:center;
}


.topmenubot a {
padding:1px 5px;
border-collapse:collapse;
color:#400040;
font-weight:bold;
text-decoration:none;
text-align:center;
background-color:#E7EADB;
margin:0;
}


#menubot a:hover, .topmenu.on a {
color:#FF8000;
font-family: calibri, Arial, Helvetica;
font-variant: normal;
font-weight:500;
font-size: 90%;
text-decoration:none;
color: #FF8000;
}


.topmenu:hover ul {
display:block;
z-index:500;
float: none;
}
#Bereich-Register-bottom-1 {
background-color:;
margin-top:4%;
margin-left: 0%;
width: 100%;

Alles anzeigen

stabiles htm Layout für gängige Browser

Tags

Benutzer online in diesem Thema