✔ Drei Fragen

das_element · 4. Dezember 2005

Hoi,
also ich hab drei Fragen:
1) Was ist der Unterschied von #name und .name in nem externen Stylesheet?

2) Wie kann ich den Rahmen (dotted) im angehängten Bild über Bereich #1 und Bereich #2 durchziehen, also als nur ein Rahmen. Weil momentan (siehe Bild ->Problem 1) ist der nicht optimal.

3) Wie kann ich die Scrollleiste auf die ganze Seite bringen, so dass man nur noch nach unten Scrollen muss, alles aber mitscrollt?

das css file:

Code:

body {
	overflow: hidden;
	background: #121212;
	font-family: Arial;
	font-size: 14px;
	}


          #content {
		position: absolute;
		top: 150px; 
		left: 372px;
		right: 212px;
		bottom: 0;
		width: 440px;
		padding: 0;
		overflow: auto;
		background: #000000;
		color: #888888;
		text-margin: 10px;
		border-right: 4px;
		border-right-style: dotted;
		border-right-color: #ffffff;
}


          #header {
		position: absolute;
		top: 0;
		left: 212px;
		right: 212px;
		height: 150px;
		padding: 0;
		overflow: hidden;
		width: 596px;
		background-image: url(header.jpg);
		border-left: 4px;
		border-left-style: dotted;
		border-left-color: #ffffff;
		border-right: 4px;
		border-right-style: dotted;
		border-right-color: #ffffff;
		}


          #links {
		position: absolute;
		top: 150px;
		left: 212px;
		bottom: 0px;
		right: 0px;
		width: 160px;
		overflow: hidden;
		background: #000000;
		border-left: 4px;
		border-left-style: dotted;
		border-left-color: #ffffff;
		color: #888888;
		}

Das Bild ist hier abgelagert

mfg
Stefan

Dennis Wronka · 4. Dezember 2005

#name bezeichnet eine ID und wird nur einmal benutzt.
.name bezeichnet eine Klasse und wird immer wieder benutzt.

Beispiel aus meinem CSS-File:

Code:

#logo
	{
		/*background-color:#ffff80;*/
		background-color:#bfe0e1;
		background-image:url("/websitepics/forum-logo.jpg");
		background-repeat:no-repeat;
		position:absolute;
		top:10px;
		left:10px;
		height:40px;
		width:90px;
	}
.menu-item
	{
		border-left:1px solid;
		border-right:1px solid;
		padding-left:2px;
		padding-right:2px;
		margin-right:5px;
	}

Maik · 4. Dezember 2005

#name steht für eine ID, die in einem (X)HTML-Dokument nur einmal verwendet werden darf, .name steht für eine Klasse, die in einer Seite mehrmals vergeben darf.
Probier's mal so:

Code:

#content {
		position: absolute;
		top: 150px; 
		left: 372px;
		right: 212px;
		bottom: 0;
		width: 440px;
		padding: 0;
		overflow: auto;
		background: #000000;
		color: #888888;
		text-margin: 10px;
		border-right: 4px dotted #ffffff;
		border-left: 4px dotted #ffffff;
}

#header {
		position: absolute;
		top: 0;
		left: 212px;
		right: 212px;
		height: 150px;
		padding: 0;
		overflow: hidden;
		width: 596px;
		background-image: url(header.jpg);
		}


          #links {
		position: absolute;
		top: 150px;
		left: 212px;
		bottom: 0px;
		right: 0px;
		width: 160px;
		overflow: hidden;
		background: #000000;
		}

Wenn nicht das DIV#content, sondern die komplette Seite gescrollt werden soll:

Code:

body {
	overflow: auto;
	background: #121212;
	font-family: Arial;
	font-size: 14px;
	}

#content {
		position: absolute;
		top: 150px; 
		left: 372px;
		right: 212px;
		bottom: 0;
		width: 440px;
		padding: 0;
		background: #000000;
		color: #888888;
		text-margin: 10px;
		border-right: 4px dotted #ffffff;
		border-left: 4px dotted #ffffff;
}

das_element · 4. Dezember 2005

Hoi,
Frage 1 beantwortet!
Frage 3 beantwortet!
Das Problem bei Frage 2 besteht weiterhin.

Bei Frage 3 hat sich ein neues Problem aufgetan
--> http://img229.imageshack.us/my.php?image=problemfall0yo.gif

Maik · 4. Dezember 2005

Ein Link zur Problemseite wäre hilfreicher, als die Vorschaugrafiken.

das_element · 4. Dezember 2005

http://noexperience.no.funpic.de/my/index.html

Maik · 4. Dezember 2005

Hier mein alternatives CSS-Layout (ohne absolute Positionierungen):

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
body
{
margin: 0;
padding: 0;
overflow: auto;
background: #121212;
font-family: Arial;
font-size: 14px;
}

div#mainBox
{
width: 596px;
margin: 0 auto;
border-right: 4px dotted #ffffff;
border-left: 4px dotted #ffffff;
}

div#header
{
height: 150px;
padding: 0;
width: 596px;
background-image: url(header.jpg);
}

div#content
{
float: right;
width: 440px;
padding: 0;
background: #000000;
color: #888888;
}

div#links {
float: left;
width: 156px;
background: #000000;
}

div.clear
{
clear: both;
height: 0;
font-size: 0;
margin: 0;
padding: 0;
}
-->
</style>

</head>
<body>

<div id="mainBox">
     <div id="header">header</div>

     <div id="links">links</div>

     <div id="content">content</div>

     <div class="clear"></div>
</div>

</body>
</html>

das_element · 4. Dezember 2005

hoi
des hat irgendwie ned funktionert?

Maik · 4. Dezember 2005

Könntest du bitte auch mitteilen, was nicht funktioniert hat?

Wir sind nämlich keine Hellseher ;-]

Maik · 5. Dezember 2005

Vermutlich sprichst du von der Höhe, die (automatisch) bis zum unteren Fensterrand reichen soll

Hier das überarbeitete CSS-Layout.

Browsercheck: FF 1.5, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html, body
{
height: 100%;
margin: 0;
padding: 0;
}

body
{
background: #121212;
font-family: Arial;
font-size: 14px;
}

div#mainBox
{
width: 596px;
margin: 0 auto;
background: #000000;
border-right: 4px dotted #ffffff;
border-left: 4px dotted #ffffff;
border-bottom: 1px solid #000000;
}

div#header
{
height: 150px;
padding: 0;
width: 596px;
background-image: url(header.jpg);
}

div#links
{
float: left;
width: 156px;
height: 100%;
background: #000000;
}

div#content
{
float: right;
width: 440px;
height: 100%;
background: #000000;
color: #888888;
}

div.clear
{
clear: both;
height: 0;
font-size: 0;
margin: 0;
padding: 0;
}
-->
</style>

</head>
<body>

<div id="mainBox">
     <div id="header">header</div>

     <div id="links">
     <ul style="list-style-image: url(li.bmp); margin: 12px; padding-top: 25px; padding-left: 12px; color: #fff;">
         <li>Home</li>
         <li>Über mich</li>
         <li>Meine Freunde</li>
         <li>Bilder</li>
         <li>Guestbook</li>
         <li>Kontakt</li>
     </ul>
     </div>

     <div id="content">
     <u>Warum werde immer ich gehauen?</u><br>
Lorem ipsum sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet e magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure  in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro e eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis e te feugait nulla facilisi.<br><br>
<u>Sowas gibt's doch garnicht!</u><br>
Lorem ipsum sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet e magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure  in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro e eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis e te feugait nulla facilisi.<br><br>
<u>Endlich mal Erfolg!</u><br>
Lorem ipsum sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet e magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure  in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro e eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis e te feugait nulla facilisi.<br><br>
<u>Die ewige Smiley-Sucht</u><br>
Lorem ipsum sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet e magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure  in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro e eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis e te feugait nulla facilisi.<br><br>
     </div>

     <div class="clear">&nbsp;</div>
</div>

</body>
</html>

✔ Drei Fragen

das_element

Erfahrenes Mitglied

Dennis Wronka

Soulcollector

Maik

das_element

Erfahrenes Mitglied

Maik

das_element

Erfahrenes Mitglied

Maik

das_element

Erfahrenes Mitglied

Maik

Maik

Neue Beiträge