|
|||
Ausrichtung oberer Bildschirmrand
Obwohl body mit margin=0 und padding=0 in der css steht erzeugen alle Browser außer der IE am obigen Rand einen Abstand (sollte keiner sein). Anbei der Code der html Seite... css ist geprüft. An der liegt es nicht. habe ich schon mit einer anderen css-datei probiert.
Der Quellcode Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>unbenannt</title> <link rel="stylesheet" href="media/style1.css" type="text/css" /> </head> <body> <div id="container"> <div id="logo"> <h1>Logo....</h1> <a href="#"><img src="media/logo.gif" width="200" height="107" alt="LOGO" /></a> </div> <ul id="maintab"> <li><a href="http://www.dynamicdrive.com">Home</a></li> <li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li> <li><a href="http://www.dynamicdrive.com/style/">CSS</a></li> <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li> <li class="selected"><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li> </ul> <div id="tabcontent" class="clearfix"> <!--Sub Content #1 --> <ul> <li><a href="http://www.dynamicdrive.com">Home</a></li> <li><a href="http://www.dynamicdrive.com/new.htm">New</a></li> <li><a href="http://www.dynamicdrive.com/revised.htm">Revised</a></li> </ul> <!--Sub Content #2 --> <ul class="selected"> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image Effects</a></li> <li class="selected"><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form Effects</a></li> </ul> </div> <div id="header"> <div id="headerimage"><img src="media/logo.jpg" width="205" height="200" alt="" title="" /></div> <div id="header-text">Test</div> </div> <div id="wrapper"> <div id="content"> <h2>Logo......</h2> <p>100 % CSS und XHMT valid</p> <p>Accessibility is a big issue, which is why you will find an h1 tag in the header code but you will not see it on the template. This is because I used CSS to make it invisible, but when viewed by a computer without styles or with a screenreader, it will help improve accessibility. It also helps with Search Engine Optimization, as you can have your important keywords in there as well.</p> <h3>Unterüberschrift</h3> <p>Unter diesen Teilen kommen jetzt die Details zu den einzelnen fals über notwendig.....<br/> Sollte es notwendig sein noch Unterunterschriften zu kreieren habe ich zu wenig Arbeit</p> <h3>2. Unterüberschrift</h3> <p>Hier die 2 Unterüberschrift</p> </div> <!--End Content--> <div id="right"> <h4>"Hier stehen die Zitate diverser gscheiter Leut"</h4> <h5>This is where all the content on the right goes. It can be used for a login form, news updates, etc etc...</h5> </div> <!--End Right--> </div> <!--End Wrapper--> <div id="footer"> E-Mail: </div><!--End Footer--> </div> <!--End Container--> </body> </html> Herzlichen Dank |
Sponsored Links |
Sponsored Links |
|
|||
css Code
Hallo, danke für die rasche Antwort..
hier der css-code - wie kann ich das einfügen? Code:
#maintab { padding-top : 107px; padding-left : 0; margin-left : 0; margin-bottom : 3px; font : bold 0.75em Arial, Verdana, sans-serif; list-style-type : none; } #maintab li { display : inline; margin : 0; } #maintab li a { text-decoration : none; padding : 3px 7px; margin-right : 3px; border : 1px solid #a3c53b; color : black; background : white; } #maintab li a:hover { background : #79b702; } #maintab li.selected a { background-color : #a3c53b; border-left-color : navy; border-right-color : navy; border-top-color : navy; } #tabcontent { font : bold 0.75em Arial, Verdana, sans-serif; border : 1px solid #a3c53b; background-color : #79b702; height : 22px; } #tabcontent ul { padding : 0; margin : 0; list-style-type : none; display : none; } #tabcontent ul li { display : inline; } #tabcontent ul.selected { display : block; } #tabcontent ul li a { border-right : 1px solid #a3c53b; color : #000000; padding : 4px 7px; display : block; float : left; text-decoration : none; } #tabcontent ul li a:hover { background-color : #a3c53b; } #tabcontent li.selected a { background-color : #a3c53b; } .clearfix:after { content : "."; display : block; height : 0; clear : both; visibility : hidden; } .clearfix { display : inline-table; } * html .clearfix { height : 1%; } .clearfix { display : block; } #header { clear : both; padding : 0; width : 100%; height : 200px; line-height : 8px; background : #a3c53b; border-top : 0 solid #fff; } #headerimage img { float : left; border-right : 1px solid #000000; padding-left : 0; margin : 0; } #header-text { float : right; font : bold 2em Arial, Verdana, sans-serif; color : #ffffff; text-align : right; padding-right : 25px; padding-top : 160px; } html, body { margin : 0; } #container { position : relative; width : 860px; margin : 0 auto; } #content { float : left; width : 70%; } #logo { position : absolute; top : 0; right : 0; width : 100%; height : 100px; background : url("headerbg.jpg") repeat-x 0% 0%; text-align : right; } #wrapper { width : 858px; float : left; border-left : 1px dotted #a3c53b; border-right : 1px dotted #a3c53b; } #footer { width : 100%; clear : both; text-align : center; padding : 5px 0; color : #fff; background : #a3c53b; font : 0.75em Arial, Verdana, sans-serif; } p { font : 1em Arial, Verdana, sans-serif; text-align : justify; margin : 0; padding : 0 15px 25px 25px; line-height : 1.5em; } img { border : 0; } h1 { display : none; font : 1em Arial, Verdana, sans-serif; } h2 { font : bold 1.2em Arial, Verdana, sans-serif; text-align : left; margin-left : 25px; margin-right : 16px; margin-bottom : 25px; padding : 11px 0 10px 0; border-bottom : 2px solid #a3c53b; } h3 { font : bold 1em Arial, Verdana, sans-serif; text-align : left; margin : 0; padding : 0 15px 10px 25px; } h4 { font : bold 1em Arial, Verdana, sans-serif; font-style : italic; text-align : justify; padding : 8px 25px 0 8px; } h5 { font : 1em Arial, Verdana, sans-serif; text-align : right; margin : 0; padding : 0 25px 8px 8px; } #right { font : 0.75em Arial, Verdana, sans-serif; width : 28%; float : right; } |
|
|||
....doch noch eine Frage
bei dem Stylesheet ist der Abstand des content und right vom oberen Rand im Firefox, etc. ca. 25px... ideal. im IE jedoch viel weniger... gibts da eine Möglichkeit das anzugleichen.
DAnke |
|
|||
Hallo Timo,
mit deinem Rat hat sich das auch bereits erledigt. Dadurch sind nun auch die Abstände bei "Unterboxen" gleich. Leider noch kein Link existent... Seite in Vorbereitung |
Sponsored Links |
|
||||
Das hatte ich vermutet, denn mit dem CSS Prolog werden alle browserseitigen Abstände auf Null gesetzt
__________________
Um weitere Erklärungen eingeblendet zu bekommen, drücken Sie bitte die Tastenkombination Alt + F4 |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Ausrichtung eines PopUp-Menüs | Maik20b | CSS | 4 | 07.11.2010 21:11 |
Probleme mit der Ausrichtung | johnzon | CSS | 3 | 23.10.2009 16:59 |
Footer immer am unteren Bildschirmrand | BoFiaZ | CSS | 22 | 29.05.2009 12:45 |
CSS grafik-rollover ausrichtung | tobster711 | CSS | 0 | 19.03.2008 01:56 |
Ausrichtung, Aufteilung, CSS - Brauche Hilfe | daFish | CSS | 0 | 05.04.2006 13:12 |