Suchergebnisse | lima-city

Suche auf lima-city

Beiträge (1)

in: Positionierung vom unteren Rand nicht möglich?

geschrieben von blogness

Hallo Lima-Gemeinde!

Ich habe seit einiger Zeit das Problem, dass mir bei dem Design meiner Webseite etwas bestimmtes nicht gelingen will. Ich habe einen Header, an dessen Boden sich die Hauptnavigation befinden soll. Diese wollte ich mit Margin-bottom steuern, was aber nicht geklappt hat: Die Navigation befand sich immer in der oberen Hälfte des Headers. Ich habe sie dann von oben aus positioniert, was eigentlich so nicht geplant ist weil man dann die Schriftgröße nicht ohne weiteres ändern kann. Doch selbst da traten Probleme auf: Während Opera die Navigation direkt auf den Boden des Headers setzt, blebt bei allen anderen Browsern (also davon gehe ich jetzt mal aus, ich habs mit Firefox und Safari getestet) ein ein Pixel breiter Rand. Das liegt daran, dass der eigentliche Link bei der Darstellung im Firefox 22, bei Opera aber 23 Pixel hoch ist. Zur Verdeutlichung:

http://blogness.lima-city.de/opera.png
http://blogness.lima-city.de/firefox.png
Stylesheet: http://blogness.lima-city.de/mainresources.css
(heute funktioniert irgendiwe mein ftpzugang weder über filezilla noch leechftp, wenn das problem gelöst ist sind hinter den links dann auch die dinge zu sehen die screenshots und das stylesheet darstellen, bis dahin gibts das stylesheet als code, ich hoffe ihr könnt euch trotzdem vorstellen was ich meine...)

Stylesheet:

html {

	height: 100%;

	margin: 0;

	padding: 0;

}

body {

	font-size: 85%;

	font-family: 'Trebuchet MS', Verdana, Arial, Sans-Serif;

	text-align: center;

	height: 100%;
	margin: 0;

	padding: 0;
	padding-bottom: 30px;
	background-image: url(images/backgrounds/bg_body_main.png);
	background-repeat: repeat;
	background-attachment: fixed;
	background-position: top left;
	background-color: #000000;

}
a:link, a:visited, a:active {
	color: #00c100;
	text-decoration: none;
	border-bottom-color: #00c100;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
}
a:hover, a:focus {
	border-bottom-style: solid;
}
a:hover {
	cursor: pointer;
}
h2 {
	padding: 2px;
	clear: both;
	border-bottom: 1px dotted #000;
	font-size: 20px;
	font-weight: bold;
	padding-top: 2px;
	padding-bottom: 2px;
	margin-bottom: 2px;
	margin-top: 2px;
}

#error_noscript {
	position: fixed;
	bottom: 3px;
	background-color: #eee;
	color: #f00000;
	border: 2px solid #f00000;
	padding: 3px;
	margin-left: 50px;
	margin-right: 50px;
}

#wrap {
	width: 900px;
	height: auto;
	margin: 0 auto;
	padding: 0px;
	text-align: left;
}
#headliner {
	width: 100%;
	height: 120px;
	position: absolute;
	z-index: -1;
	float: clear;
}
#headliner #bg {
	width: 100%;
	height: 100%;
}
#headershadow {
	color: transparent;
	width: 100%;
	height: 20px;
	background-image: url(images/backgrounds/shadow.png);
	background-attachment: scroll;
	background-position: top left;
	background-repeat: repeat-x;
	position: absolute;
	top: 120px;
	left: 0px;
	right: 0px;
	z-index: -1;
}
#header_spaceholder {
	width: 900px;
	height: 20px;
	background-color: transparent;
	color: transparent;
}
#header {
	width: 900px;
	height: 100px;
	margin: 0px;
	padding: 0px;
	float: clear;
	text-align: left;
	background-color: rgba(255, 255, 255, 0.4);
}
#header .logo {
	width: 225px;
	margin-top: 18px;
	margin-left: 18px;
}
ul#navi {
	float: right;
	margin-bottom: 0px;
	margin-right: 20px;
	height: 23px;
}
ul#navi li {
	float: left;
	display: block;
	margin-bottom: 0px;
	margin-top: 67px;
}
#navi a {
	font-size: 12px;
	font-family: 'Arial';
	font-weight: bold;
	color: #fff;
	border-left-color: #fff;
	border-left-width: 1px;
	border-left-style: solid;
	border-bottom-width: 0px;
	padding-bottom: 2px;
	padding-left: 6px;
	padding-right: 20px;
	padding-top: 6px;
	margin-bottom: 0px;
}
#navi a:hover, #navi a:active, #navi a:focus, #navi a#navi_active {
	text-decoration: none;
	color: #000;
	font-weight: bold;
	border-left-color: #090fef;
	background-image: url('images/backgrounds/bg_navi.png');
	background-repeat: no-repeat;
	background-position: bottom left;
	background-repeat: repeat-x;
	border-bottom-width: 0px;
}
#content {
	background-color: #fff;
	min-height: 500px;
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 20px;
	padding-top: 5px;
}
#contentwrap {
	margin-top: 20px;
	/*width: 715px;*/
	border-width: 0px;
}
#contentshadow {
	color: transparent;
	width: 100%;
	height: 20px;
	background-image: url(images/backgrounds/shadow.png);
	background-attachment: scroll;
	background-position: top left;
	background-repeat: repeat-x;
}
#footer {
	width: 800px;
	margin-left: 50px;
	margin-top: -20px;
	padding: 0px;
}
#footer a {
	border-width: 0px;
}
#footer a:hover, #footer a:focus {
	text-decoration: underline;
}
#footer_left_margin {
	width: 15px;
	height: 40px;
	background-image: url(images/backgrounds/bg_footer_left.png);
	background-attachment: scroll;
	background-position: bottom right;
	background-repeat: repeat-x;
	margin-right: 0px;
	color: transparent;
	float: left;
}
#footer_content_wrap {
	width: 770px;
	height: 40px;
	background-image: url(images/backgrounds/bg_footer_center.png);
	background-attachment: scroll;
	background-position: bottom left;
	background-repeat: repeat-x;
	margin-left: 0px;
	margin-right: 0px;
	text-align: center;
	float: left;
}
#footer_content {
	margin-top: 18px;
}
#footer_right_margin {
	width: 15px;
	height: 40px;
	background-image: url(images/backgrounds/bg_footer_right.png);
	background-attachment: scroll;
	background-position: bottom left;
	background-repeat: repeat-x;
	margin-left: 0px;
	color: transparent;
	float: right;
}
#footer_content_shadow {
	color: transparent;
	position: absolute;
	z-index: 1;
	width: 800px;
	height: 20px;
	margin-left: 0px;
	margin-right: 0px;
	background-image: url(images/backgrounds/shadow.png);
	background-attachment: scroll;
	background-position: top left;
	background-repeat: repeat-x;
}
/* es folgen noch einige noch unwichtigere styles... */

<!-- Abschnitt des Quellcodes -->

<div id="headliner"><img src="images/backgrounds/bg_main.png" id="bg" alt="header" /></div>
<div id="headershadow">&emsp;</div>
<div id="wrap">
	<div id="header_spaceholder"></div>
	<div id="header">
		<img src="images/logo.png" alt="blog:ness" class="logo" />
		<ul id="navi" onmouseover="document.getElementById('navi_active').id='navi_reactive';" onmouseout="document.getElementById('navi_reactive').id='navi_active';">
			<li><a href="index.php" title="home" id="navi_active">home</a></li>
			<li><a href="index.php?section=news" title="news">news</a></li>
			<li><a href="index.php?section=projekte" title="projekte">projekte</a></li>
			<li><a href="index.php?section=blog" title="blog">blog</a></li>
			<li><a href="index.php?section=login" title="login">login</a></li>
		</ul>
	</div>
	<div id="content">

<!-- [...] -->

Es ergeben sich für mich zwei Fragen:
1.: Wie kann ich die Navigation vom unteren Rand des Headers aus bestimmen?
2.: Wieso macht Opera die Links um einen Pixel größer als die anderen Browser?

Vielen Dank im Vorraus :)
lg

kostenloser Webspace werbefrei: lima-city

Suche auf lima-city

in: Positionierung vom unteren Rand nicht möglich?

Login zum Webhosting ohne Werbung!