(Anfänger) Seite mit "Boxen"

Lodurr · #1 (**permalink**) 07.07.2009, 00:25

Hallo Leute,

ich beschäftige mich erst seit ein paar Tagen mit HTML und CSS. Ich habe den Anfang meines Seitenentwurfs realisiert: Meine Seite

Probleme:

Problem #1: Die Seite sieht zwar im Firefox so aus, wie ich möchte, im IE 6 sind die Boxen allerdings viel zu weit vom Menü entfernt.

Problem #2: Man beachte die Texte in den Boxen. Bei der Benutzerbox hab' ich dem Text lediglich eine Klasse zugewiesen:

Code:

<span class="boxtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>

Die Klasse "boxtext" hat als Eigenschaft u. a. "margin: 10px;", aber es wirkt sich irgendwie nur auf die erste Zeile aus.

Bei der rechten Box habe ich die Eigenschaft margin gleich mit <p> gesetzt und es funktioniert komischerweise mit dem gesamten Text:

Code:

<span class="boxtext">
<p style="margin: 10px">Lorem ipsum dolor sit amet
[...]</p></span>

Problem #3: Klickt man einen Button an, so wird ein unschöner, gepunkteter Rand sichtbar. Wie bekomme ich das weg?

Hier die kompletten Codes:

testen.html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">			
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Meine Seite</title>
<link rel="stylesheet" type="text/css" href="testen.css">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="kopf">
</div>

<div id="leiste">
	<span class="leiste_links"></span>
	<span class="btn_neuigkeiten"><a href="#"></a></span>
	<span class="btn_nachrichten"><a href="#"></a></span>
	<span class="btn_artikel"><a href="#"></a></span>
	<span class="btn_forum"><a href="#"></a></span>
	<span class="leiste_rechts"></span>
</div>

<div>
	<span class="box_oben">
		<span class="boxueberschrift">Benutzer</span>
	</span>
	
	<span class="box_unten">
		<span class="boxtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
	</span>
	
	<span class="neuigkeiten">
		<span class="boxueberschrift">Neuigkeiten</span>
		
		<span class="boxtext">
			<p style="margin: 10px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
		</span>
		
	</span>
</div>

</body>
</html>

testen.css:

Code:

*
{
padding: 0;
margin: 0;
}

body
{
font: 14px, arial;
line-height: 14px;
color: #ffffff;
background: rgb(109, 109, 109);
background-image:url(bg.jpg);
background-attachment:fixed;
background-repeat: no-repeat;
}



#kopf
{
height: 145px;
width: 1024px;
background-image: url(top.jpg);
}

#leiste
{
height: 35px;
width: 1024px;
}

.leiste_links
{
display:block;
background-image:url("leiste_links.gif");
width:115px; height:35px;
}

.btn_neuigkeiten a
{
display:block;
position: relative;
top: -35px;
left: 115px;
background-image:url("btn_neuigkeiten_dual.gif");
width:90px; height:35px;
}

.btn_neuigkeiten a:hover
{
position: relative;
background-position: 0px -35px;
}

.btn_nachrichten a
{
display:block;
position: relative;
top: -70px;
left: 205px;
background-image:url("btn_nachrichten_dual.gif");
width:90px; height:35px;
}

.btn_nachrichten a:hover
{
background-position: 0px -35px;
}

.btn_artikel a
{
display:block;
position: relative;
top: -105px;
left: 295px;
background-image:url("btn_artikel_dual.gif");
width:90px; height:35px;
}

.btn_artikel a:hover
{
background-position: 0px -35px;
}

.btn_forum a
{
display:block;
position: relative;
top: -140px;
left: 385px;
background-image:url("btn_forum_dual.gif");
width:90px; height:35px;
text-decoration:none;
}

.btn_forum a:hover
{
background-position: 0px -35px;
}

.leiste_rechts
{
display:block;
position: relative;
background-image:url("leiste_rechts.gif");
top: -175px;
left: 475px;
width:549px; height:35px;
}


.box_oben
{
display: block;
margin-top: 5px;
margin-left: 5px;
height: 18px;
width: 198px;
line-height: 18px;
background-color: #ffffff;
background-image: url(box_oben.gif);
font-size: 14px;
letter-spacing: 1px;
background-position: center;
background-repeat: x-repeat;
border-style: solid;
border-width: 1px;
border-color: #000000;
}

.box_unten
{
display: block;
margin-top: 0px;
margin-left: 5px;
height: 310px;
width: 198px;
background-image: url(box_unten.jpg);
background-position: center;
background-repeat: x-repeat;
border-style: solid;
border-width: 0px 1px 1px 1px;
border-color: #000000;
}

.neuigkeiten{
position: relative;
display: block;
margin-top: -331px;
margin-left: 210px;
padding-left: 0px;
height: 329px;
width: 598px;
line-height: 18px;
background-image: url(neuigkeiten_n.gif);
font-size: 12px;
color: #000000;
letter-spacing: 1px;
background-position: center;
background-repeat: no-repeat;
border-style: solid;
border-width: 1px;
border-color: #000000;
}

.boxtext{
font: 12px, arial;
color: #000000;
letter-spacing: normal;
margin: 10px;
}

.boxueberschrift{
line-height: 18px;
margin: 10px;
font: 12px, arial;
font-weight: bold;
color: #ffffff;
}

Danke für konstruktive Beiträge. Mir ist schon klar, dass der Code in seiner jetzigen Form wahrscheinlich recht schlecht ist, bin eben Anfänger...

Gruß

heiko_rs · #2 (**permalink**) 07.07.2009, 01:44

1. Durch Deine span-Konstruktion wird das div zu hoch - der IE < 7 dehnt es trotz height aus (daher der scheinbare Abstand), alle anderen Browser nicht. Siehe übrigens unbedingt FAQ!

2. span ist ein Inline-Element, es braucht display: block; um sich wie ein p oder div zu verhalten. Übrigens darf span keine Blockelemente enthalten (hier: p). Immer validieren! The W3C Markup Validation Service

3. Mit outline: none; - aber dieser Rand sollte bleiben, denn er hat seinen Sinn: Er ist die unmissverständliche Kennzeichnung eines Links, auf dem der Fokus liegt.

Lodurr · #3 (**permalink**) 07.07.2009, 23:45

Zitat:

Zitat von heiko_rs

1. Durch Deine span-Konstruktion wird das div zu hoch - der IE < 7 dehnt es trotz height aus (daher der scheinbare Abstand), alle anderen Browser nicht. Siehe übrigens unbedingt FAQ!

2. span ist ein Inline-Element, es braucht display: block; um sich wie ein p oder div zu verhalten. Übrigens darf span keine Blockelemente enthalten (hier: p). Immer validieren! The W3C Markup Validation Service

3. Mit outline: none; - aber dieser Rand sollte bleiben, denn er hat seinen Sinn: Er ist die unmissverständliche Kennzeichnung eines Links, auf dem der Fokus liegt.

Danke für deine Antwort!

Problem #2 und #3 sind gelöst, Problem #1 zur Hälfte. Habe wie in den FAQ beschrieben ein Listenmenü draus gebastelt, im IE 8 und dem Firefox wird es nun auch vernünftig angezeigt. Lediglich im IE 6 sieht es komisch aus:

Die Seite: Meine Seite

Die erneuerten Codes:

testen.html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">			
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Meine Seite</title>
<link rel="stylesheet" type="text/css" href="testen.css">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="kopf">
</div>

	<ul id="leiste">
		<li class="leiste_links"></li>
		<li class="btn_neuigkeiten"><a href="#"></a></li>
		<li class="btn_nachrichten"><a href="#"></a></li>
		<li class="btn_artikel"><a href="#"></a></li>
		<li class="btn_forum"><a href="#"></a></li>
		<li class="leiste_rechts"></li>
	</ul>

<div id="box_benutzer">
	<span class="box_oben">
		<span class="box_ueberschrift">Benutzer</span>
	</span>

	<span class="box_unten">
		<span class="box_text">
		<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
		</span>
	</span>
</div>
	
<div id="box_neuigkeiten">
		<span class="box_ueberschrift">Neuigkeiten</span>
		
		<span class="box_text">
			<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
			Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
		</span>
		
</div>

</body>
</html>

testen.css:

Code:

*
{
padding: 0;
margin: 0;
}

body
{
font-family: Arial, Helvetica, sans-serif;
font: arial;
font-size: 14px;
line-height: 14px;
color: #ffffff;
background: rgb(109, 109, 109);
background-image:url(bg.jpg);
background-attachment:fixed;
background-repeat: no-repeat;
}

#kopf
{
height: 145px;
width: 1024px;
background-image: url(top.jpg);
}

#leiste
{
position: relative;
display: block;
height: 35px;
width: 1024px;
outline: none;
list-style: none;
}

.leiste_links
{
float: left;
display: block;
position: relative;
background-image:url("leiste_links.gif");
width:115px; height:35px;
}

.btn_neuigkeiten a
{
float: left;
display: block;
position: relative;
outline: none;
background-image:url("btn_neuigkeiten_dual.gif");
width:90px; height:35px;
}

.btn_neuigkeiten a:hover
{
position: relative;
background-position: 0px -35px;
}

.btn_nachrichten a
{
float: left;
outline: none;
display:block;
position: relative;
background-image:url("btn_nachrichten_dual.gif");
width:90px; height:35px;
}

.btn_nachrichten a:hover
{
background-position: 0px -35px;
}

.btn_artikel a
{
float: left;
outline: none;
display: block;
position: relative;
background-image:url("btn_artikel_dual.gif");
width:90px; height:35px;
}

.btn_artikel a:hover
{
background-position: 0px -35px;
}

.btn_forum a
{
float: left;
outline: none;
display:block;
position: relative;
background-image:url("btn_forum_dual.gif");
width:90px; height:35px;
text-decoration:none;
}

.btn_forum a:hover
{
background-position: 0px -35px;
}

.leiste_rechts
{
float: left;
display:block;
position: relative;
background-image:url("leiste_rechts.gif");
width:549px; height:35px;
}

#box_benutzer{
float: left;
margin: 5px;
}

.box_oben
{
display: block;
height: 18px;
width: 198px;
line-height: 18px;
background-color: #ffffff;
background-image: url(box_oben.gif);
letter-spacing: 1px;
background-position: center;
background-repeat: x-repeat;
border-style: solid;
border-width: 1px;
border-color: #000000;
}

.box_unten
{
display: block;
margin: 0px;
height: 310px;
width: 198px;
background-image: url(box_unten.jpg);
background-position: center;
background-repeat: x-repeat;
border-style: solid;
border-width: 0px 1px 1px 1px;
border-color: #000000;
}

#box_neuigkeiten{
margin-top: 5px;
position: relative;
display: block;
float: left;
height: 329px;
width: 598px;
line-height: 18px;
background-image: url(neuigkeiten_n.gif);
font-size: 12px;
color: #000000;
background-position: center;
background-repeat: no-repeat;
border-style: solid;
border-width: 1px;
border-color: #000000;
}

.box_text{
display: block;
font-size: 12px;
color: #000000;
margin: 10px;
margin-top: 0px;
text-align: justify;
}

.box_ueberschrift{
line-height: 18px;
margin: 10px;
font-size: 12px;
font-weight: bold;
color: #ffffff;
}

Gruß

Lodurr · #4 (**permalink**) 12.07.2009, 15:45

Gibt es keine Möglichkeit, dass der IE auch will? :/

heiko_rs · #5 (**permalink**) 12.07.2009, 16:18

Deine li floaten nicht. Unabhängig davon hast Du unglaublich viel Redundanz in Deinem CSS, und Deinen Links fehlt der Text. Ein leeres li als Abstandhalter ist auch nicht nötig.

Lodurr · #6 (**permalink**) 16.07.2009, 16:16

Zitat:

Zitat von heiko_rs

Deine li floaten nicht. Unabhängig davon hast Du unglaublich viel Redundanz in Deinem CSS, und Deinen Links fehlt der Text. Ein leeres li als Abstandhalter ist auch nicht nötig.

Danke, nun funktioniert es auch im IE6.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Nach klick auf menüpunkt soll die gewünschte seite in der seite erscheinen	rs-web	CSS	45	17.07.2009 14:16
Shtml auf jeder Seite einbinden - counter	iVx	Serveradministration und serverseitige Scripte	1	13.09.2007 17:31
Fixer Header (CSS Frame) und Sprung zu Anker auf dieser Seite	Chico_wau	CSS	2	14.05.2007 18:08
Navigation links und oben soll aktive Seite anzeigen	Zischel	CSS	2	16.02.2007 22:30
oper und anker im div	Holger (HMR)	CSS	25	18.01.2005 13:01