zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Ausrichtung oberer Bildschirmrand

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.05.2008, 20:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.05.2008
Beiträge: 17
web07 befindet sich auf einem aufstrebenden Ast
Standard 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&uuml;berschrift</h3>
					<p>Unter diesen Teilen kommen jetzt die Details zu den einzelnen fals &uuml;ber notwendig.....<br/>
						Sollte es notwendig sein noch Unterunterschriften zu kreieren habe ich zu wenig Arbeit</p>
					<h3>2. Unter&uuml;berschrift</h3>
					<p>Hier die 2 Unter&uuml;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>
Würde ich maintab in einen div einbinden (derzeit ul id="maintab") wäre zwar der Abstand weg, jedoch verschiebt es dann das Submenü total.
Herzlichen Dank
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.05.2008, 20:08
Benutzerbild von Timo
table-layout: none;
XHTMLforum-Kenner
 
Registriert seit: 11.11.2006
Beiträge: 5.345
Timo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein Lichtblick
Standard

Die CSS Date währe hilfreicher

Aber padding = 0 und margin = 0 Hilft nicht viel

Füge einen CSS Prolog ein:
Code:
* {
     padding: 0;
     margin: 0;
}
__________________
Um weitere Erklärungen eingeblendet zu bekommen, drücken Sie bitte die Tastenkombination Alt + F4
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.05.2008, 20:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.05.2008
Beiträge: 17
web07 befindet sich auf einem aufstrebenden Ast
Lächeln 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;
}
Danke
Mit Zitat antworten
  #4 (permalink)  
Alt 20.05.2008, 20:41
Benutzerbild von duessu
{blubb /}
XHTMLforum-Mitglied
 
Registriert seit: 05.09.2005
Beiträge: 371
duessu befindet sich auf einem aufstrebenden Ast
Standard

Fügo Timos Code einfach bei dir zuoberst in das CSS ein...
Mit Zitat antworten
  #5 (permalink)  
Alt 20.05.2008, 20:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.05.2008
Beiträge: 17
web07 befindet sich auf einem aufstrebenden Ast
Standard Gelöst

PERFEKT ... Herzlichen Dank!
Mit Zitat antworten
  #6 (permalink)  
Alt 20.05.2008, 21:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.05.2008
Beiträge: 17
web07 befindet sich auf einem aufstrebenden Ast
Standard ....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
Mit Zitat antworten
  #7 (permalink)  
Alt 20.05.2008, 22:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.05.2008
Beiträge: 17
web07 befindet sich auf einem aufstrebenden Ast
Standard ...erledigt

Hat sich erledigt mit den obigen Zeilen,
web h
Mit Zitat antworten
  #8 (permalink)  
Alt 20.05.2008, 22:31
Benutzerbild von Timo
table-layout: none;
XHTMLforum-Kenner
 
Registriert seit: 11.11.2006
Beiträge: 5.345
Timo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein Lichtblick
Standard

Gibst du uns mal einen Link zu deinem Desing?
__________________
Um weitere Erklärungen eingeblendet zu bekommen, drücken Sie bitte die Tastenkombination Alt + F4
Mit Zitat antworten
  #9 (permalink)  
Alt 20.05.2008, 22:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.05.2008
Beiträge: 17
web07 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 20.05.2008, 22:36
Benutzerbild von Timo
table-layout: none;
XHTMLforum-Kenner
 
Registriert seit: 11.11.2006
Beiträge: 5.345
Timo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein Lichtblick
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:40 Uhr.