kostenloser Webspace werbefrei: lima-city

Positionierung vom unteren Rand nicht möglich?

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

auto boden browser code frage header http image index navigation opus pixel position problem safari steuer tabelle text url zelle
  1. Autor dieses Themas

    blogness

    blogness hat kostenlosen Webspace.

    18:39, 12.2.2011
    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

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. kostenlose-javascripts

    Kostenloser Webspace von kostenlose-javascripts

    kostenlose-javascripts hat kostenlosen Webspace.

    18:49, 12.2.2011
    Antwort auf Frage 2:
    Die Browser rechnen anders.
    Du kannst aber Maximal und Minimalhöhe angeben. So bekommt man das einigermaßen in den Griff.
    http://de.selfhtml.org/css/eigenschaften/positionierung.htm#min_width
    :biggrin:

  4. voloya

    voloya hat kostenlosen Webspace.

    18:59, 12.2.2011
    Hallo :wave:

    Ich hatte genau das gleiche Problem bei meiner Seite (Link in der Signatur).
    Unter den Menübuttons gab es immer in irgendeinem Browser einen kleinen freien Streifen. Komischerweise habe ich das ganz einfach mit "overflow:hidden;"(für den header div glaube ich) wegmachen können.
    Vielleicht hilfts dir ja auch

    mfg :wave:

  5. k*********h

    21:21, 28.2.2011

    um das elegant zu lösen:



    mach aus deinem header (ists vielleicht ein div?) eine tabelle mit 1 zeile und 1 zelle. diese kannst du valide entweder im html mit

    <td valign="bottom">

    oder css mit

    td {
    vertical-align:bottom;
    }

    formatieren.




    bedenke die standart ränder der tabelle zu ändern wenn du pixelgenau arbeiten willst:

    <table border="0" cellpadding="0" cellspacing="0">

  6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!