Content im Quelltext oben positionieren ???
Verfasst: 12.04.2006, 17:10
Hallo CSS Experten,
habe leider noch wenig Ahnung on der Materie und wollte daher mal anfragen ob hier jemand weiss wie es geht......
Habe ein 2 Spalten layout ........links das menu..
also <div class="menucontainer"> und in der mitte den inhalt ..
also <div id="content">
nur wird im quellcode die menue inhalte vor dem eigentlichen content angezeigt und das wuerde ich gerne aendern ...........
Wie kann ich erreichen, dass im Quellcode der Content vor dem Menue aufgelistet wird ???
Bitte um Info !
DANKE !
Mike
CSS Datei....
body {
margin: 20px 0 20px 0;
background-color: #f8f8f8;
}
#container {
width: 790px;
margin: 0 auto;
font-family: Lucida Grande, Tahoma, Arial, Helvetica, sans-serif; /* Lucida Grande for the Macs, Tahoma for the PCs */
font-size: 11px;
line-height: 1.2em;
color: #00339D;
background-color: #FFF;
border:1px solid #00339D;
}
span {
font-size: 11px;
display:block;
}
a {
color:#2C3C77;
text-decoration: none;
}
a:hover {
color:#bbb;
}
form {
margin-top: 15px;
font-size: 9px;
}
input {
background-color: #FFF;
color: #999999;
font-size: 11px;
padding: 3px;
}
.button {
padding: 2px;
}
#header {
border-bottom: 0px solid #00339D;
padding-top: 0px;
clear: both;
margin-bottom: 0px;
text-align:left;
}
#header p {
margin-top: -20px;
margin-left: 290px;
color: #00339D;
}
#content {
width: 600px;
/*margin-left: 180px;
margin-right: 180px;*/
text-align:left;
}
#content h1 {
font: bold 18px Verdana, Arial, Helvetica, sans-serif;
color: #00339D;
margin-bottom: 5px;
margin-left: 0px;
}
#content h2 {
margin-top:7px;
}
#content a, #content a:hover {text-decoration:underline; font-weight:bold;}
#content p {
padding-bottom: 10px;
}
#sidebar {
float: right;
}
#footer {
margin-bottom: 5px;
clear: both;
background-color:#fff;
padding: 1px;
text-align:center;
}
#footer p {
color:##00339D;
padding: 0px;
}
#footer p a {
color: ##00339D;
}
#footer p a:hover {
color: ##00339D;
}
.menucontainer {
border:1px solid #00339D;
width:150px;
margin:5px;
padding-left: 0;
float: left;
}
a.menu:link, a.menu:visited {
color:#555;
background-color:#f8f8f8;
text-decoration:none;
}
a.menu:active, a.menu:hover {
color:#225FA0;
background-color:#fff;
text-decoration:underline;
}
a.menu {
display:block;
padding-left:5px;
border-top:1px solid #bbb;
background-color:#00339D;
text-align:left;
color:#555;
text-decoration:none;
margin:0 1px;
}
.menutitle, a.menutitle {
font-weight:bold;
font-size:12px;
color: #fff;
background-color:#00339D;
margin:1px 1px;
padding: 1px 5px;
}
.menutitle a{
color:#fff;
display:block;
}
.menutitle a:hover {
color:#bbb;
text-decoration:underline;
}
habe leider noch wenig Ahnung on der Materie und wollte daher mal anfragen ob hier jemand weiss wie es geht......
Habe ein 2 Spalten layout ........links das menu..
also <div class="menucontainer"> und in der mitte den inhalt ..
also <div id="content">
nur wird im quellcode die menue inhalte vor dem eigentlichen content angezeigt und das wuerde ich gerne aendern ...........
Wie kann ich erreichen, dass im Quellcode der Content vor dem Menue aufgelistet wird ???
Bitte um Info !
DANKE !
Mike
CSS Datei....
body {
margin: 20px 0 20px 0;
background-color: #f8f8f8;
}
#container {
width: 790px;
margin: 0 auto;
font-family: Lucida Grande, Tahoma, Arial, Helvetica, sans-serif; /* Lucida Grande for the Macs, Tahoma for the PCs */
font-size: 11px;
line-height: 1.2em;
color: #00339D;
background-color: #FFF;
border:1px solid #00339D;
}
span {
font-size: 11px;
display:block;
}
a {
color:#2C3C77;
text-decoration: none;
}
a:hover {
color:#bbb;
}
form {
margin-top: 15px;
font-size: 9px;
}
input {
background-color: #FFF;
color: #999999;
font-size: 11px;
padding: 3px;
}
.button {
padding: 2px;
}
#header {
border-bottom: 0px solid #00339D;
padding-top: 0px;
clear: both;
margin-bottom: 0px;
text-align:left;
}
#header p {
margin-top: -20px;
margin-left: 290px;
color: #00339D;
}
#content {
width: 600px;
/*margin-left: 180px;
margin-right: 180px;*/
text-align:left;
}
#content h1 {
font: bold 18px Verdana, Arial, Helvetica, sans-serif;
color: #00339D;
margin-bottom: 5px;
margin-left: 0px;
}
#content h2 {
margin-top:7px;
}
#content a, #content a:hover {text-decoration:underline; font-weight:bold;}
#content p {
padding-bottom: 10px;
}
#sidebar {
float: right;
}
#footer {
margin-bottom: 5px;
clear: both;
background-color:#fff;
padding: 1px;
text-align:center;
}
#footer p {
color:##00339D;
padding: 0px;
}
#footer p a {
color: ##00339D;
}
#footer p a:hover {
color: ##00339D;
}
.menucontainer {
border:1px solid #00339D;
width:150px;
margin:5px;
padding-left: 0;
float: left;
}
a.menu:link, a.menu:visited {
color:#555;
background-color:#f8f8f8;
text-decoration:none;
}
a.menu:active, a.menu:hover {
color:#225FA0;
background-color:#fff;
text-decoration:underline;
}
a.menu {
display:block;
padding-left:5px;
border-top:1px solid #bbb;
background-color:#00339D;
text-align:left;
color:#555;
text-decoration:none;
margin:0 1px;
}
.menutitle, a.menutitle {
font-weight:bold;
font-size:12px;
color: #fff;
background-color:#00339D;
margin:1px 1px;
padding: 1px 5px;
}
.menutitle a{
color:#fff;
display:block;
}
.menutitle a:hover {
color:#bbb;
text-decoration:underline;
}
