Hey Community,
ich hab folgendes problem und natürlich schon ne menge gegoogelt.
leider funzt es nicht die horizontale navi mittig unter dem bild zu positionieren.
beim hover effekt bold ist noch das problem das sich alles einbischen verschiebt...
oft gefragtes thema, aber vielleicht hat jemand die muße sich kurz mal die codes durchzulesen...
vielen dank!
ich hab folgendes problem und natürlich schon ne menge gegoogelt.
leider funzt es nicht die horizontale navi mittig unter dem bild zu positionieren.
beim hover effekt bold ist noch das problem das sich alles einbischen verschiebt...
oft gefragtes thema, aber vielleicht hat jemand die muße sich kurz mal die codes durchzulesen...
vielen dank!
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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>monautrevie.de</title>
<meta name="musik, mode, fotografie, portrait" content="foto" />
<meta name="description" content="foto" />
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body id="body-index">
<div id="wrap">
<div id="header">
<h1><a href="./index.html"></a></h1>
<blockquote>
<p>fotografie</p>
</blockquote>
</div><!--end #header-->
<div id="content">
<p><img alt="" src="./images/bg.png" width="100%" height="" />
</p>
<p><center><h2><< >></h2></center></p>
<center><ul>
<li id="diploma"><a href="./diploma.html">musik </a></li>
<li id="book"><a href="./book.html">mode</a></li>
<li id="print"><a href="./mixedprint.html">menschen</a></li>
<li id="mixed"><a href="./mixed.html">editorial/published</a></li>
<li id="tshirt"><a href="./tshirtdesign.html">freunde</a></li>
<li id="sallys"><a href="./unclesallys.html">mehr</a></li>
<li id="webdesign"><a href="./webdesign.html">info</a></li>
<li id="mixed"><a href="./mixed.html">kontakt</a></li>
</center></ul>
</div><!--end #content-->
<div id="nav">
</div><!--end #nav-->
Code:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
font-size:small;
}
ol, ul {
list-style: none;
float: left;
margin: 0 auto;
}
}
li {
font-weight:bold;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*styles styles*/
html {
color:#fff;
font-family:"ITC Avant Garde Gothic", Arial, sans-serif;
}
body {
background:#ffffff url(./images/b.png);
background-repeat:no-repeat;
background-attachment:fixed;
}
h1, h2, h3, h4, h5, h6 {
font-weight:bold;
font-size:160%;
padding:.3em .5em .3em .2em;
}
h2 { font-size:150%; color:#000000; }
h3 { font-size:140%; }
h4 {}
h5 {}
h6 {}
p {
padding:;
font-size:70%,
color: #ffffff;
}
#wrap {
width:840px;
margin-left: auto;
margin-right: auto;
}
/**
* =header
*/
#header h1 {
padding:0;
}
#header h1 a {
width:450px; height:90px;
margin-top:45px;
padding:0px 0 0;
overflow:hidden;
display:block;
background: magenta url(./images/logo.png) no-repeat;
background: transparent url(./images/logo.png) no-repeat;
}
#header blockquote {
width:0px;
height:0px;
padding-top:3px;
overflow:hidden;
background: transparent url(./images/log.png) no-repeat 0 -55px;
display:block;
}
/**
* =content
*/
#content {
width:840px;
margin-top:20px;
}
#content li {
width: 4.0em
list-style: none;
margin-top:10px;
margin-right:10px;
float:left;
padding-right: 5px;
display: block;
}
#content a {
color:#000000;
text-decoration: none
}
#content a:hover {
display: block;
color:#000000;
font-weight: bold;
text-decoration:;
margin: 0 auto;
}
/**
* =nav
*/
#nav a:hover {
background:#7fb59a;
}
#body-diploma #diploma a, #body-book #book a, #body-mixedprint #mixedprint a, #body-webdesign #webdesign a, #body-freestuff #freestuff a,
#body-mixed #mixed a, #body-unclesallys #unclesallys a, #body-tshirtdesign #tshirtdesign a, #body-illustration #illustration a, #body-contact #contact a, #body-imprint #imprint a {
color:#7fb59a;
}
