CSS-Frage

Gehe zu Seite:

Geschlossen

So. 23.12.2007 13:45 Uhr #1

ZSKing Mitglied

Hey!
Ich habe mal eine Frage an Leute die
sich ein wenig mit CSS auskennen:

Warum verschiebt es sich bei folgendem
Code:

#hmenu{
background-image:url(/beta/hmenu.jpg);
border: 0px;
/* oben, rechts, unten, links */
margin: 0px 0px 40px 149px;
padding: 55px 0px 0px 180px;
width: 494px;
height: 69px;
repeat: no-repeat;
}
#contentob{
background-image:url(/beta/content_oben.jpg);
border: 0px;
/* oben, rechts, unten, links */
margin: -95px 0px 0px 0px;
width: 940px;
height: 98px;
repeat: no-repeat;
}
#contentmit{
background-image:url(/beta/content_mitte.jpg);
repeat: repeat-y;
border: 0px;
/* oben, rechts, unten, links */
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 170px;
width: 940px;
height: 25px;
}
#contentun{
background-image:url(/beta/content_unten.jpg);
border: 0px;
/* oben, rechts, unten, links */
margin: 0px 0px 0px 0px;
width: 940px;
height: 150px;
repeat: no-repeat;
}
a.hem{
color: grey;
font-size: 9px;
}

Wie auf diesem Bild:

Link

Ich wäre euch sehr verbunden, wenn
ihr mit weiterhelft! zwinker

MfG
ZSKing

»inaktiv
_________________________________

0 Mitglieder finden den Beitrag gut.

zitieren

So. 23.12.2007 15:40 Uhr #2

assault Hall Of Fame

Registriert seit
03.11.2006

Beiträge
2.925

Beitragswertungen

in #hmenu
repeat: no-repeat;
zu
background-repeat: no-repeat;
machen
0 Mitglieder finden den Beitrag gut.
- zitieren
So. 23.12.2007 15:56 Uhr #3

ZSKing Mitglied

Registriert seit
05.05.2007

Beiträge
1.026

Beitragswertungen

Super Assault!
Manchmal sieht man den Wald vor lauter Bäumen nicht.

»inaktiv
_________________________________
0 Mitglieder finden den Beitrag gut.
- zitieren

So. 23.12.2007 20:46 Uhr #4

ZSKing Mitglied

Okay beim Anpassen meines Designs ist nochmal ein Problem mit der CSS-Datei aufgetreten. -> Warum funktioniert padding für rechts hier nicht?

#contentmit{
background-image:url(/beta/content_mitte.jpg);
border: 0px;
/* oben, rechts, unten, links */
margin: 0px 0px 0px 0px;
padding-left: 160px;
padding-right: 170px;
width: 940px;
height: 25px;
background-repeat: repeat-y;
}

Bild des Problems:
Link

Also eigentlich sollte sich die Box ja nach unten erweitern und das mit dem Padding ändert sich nicht, egal welchen Wert ich eingebe. Auf der anderern Seite funktioniert es aber wieder.
*confused*

Liebe Grüße
ZSKing

PS:
Jaja CSS ist nicht so mein Gebiet. zunge

»inaktiv
_________________________________

0 Mitglieder finden den Beitrag gut.

zitieren

Do. 27.12.2007 13:04 Uhr #5

ZSKing Mitglied

Registriert seit
05.05.2007

Beiträge
1.026

Beitragswertungen

Kann mir niemand helfen?!

»inaktiv
_________________________________
0 Mitglieder finden den Beitrag gut.
- zitieren
Do. 27.12.2007 16:29 Uhr #6

assault Hall Of Fame

Registriert seit
03.11.2006

Beiträge
2.925

Beitragswertungen

versuchs mal mit padding: 0px 170px 0px 160px; anstatt dem anderen

wüsst auch nicht, was da dran nu falsch ist, und ich bin in diesem teil von css eigentlich recht gut bewandert
0 Mitglieder finden den Beitrag gut.
- zitieren
Do. 27.12.2007 18:56 Uhr #7

ZSKing Mitglied

Registriert seit
05.05.2007

Beiträge
1.026

Beitragswertungen

Ich habe es auch so:

?
1
2
/* oben, rechts, unten, links */
padding: 0px 170px 0px 160px;

Ich poste morgen nochmal die gesamten Code, überspiele die komplett auf den FTP-Server und schicke dir den Link.

MfG
ZSKing

»inaktiv
_________________________________
0 Mitglieder finden den Beitrag gut.
- zitieren

Fr. 28.12.2007 15:55 Uhr #8

ZSKing Mitglied

Okay also hier nochmal komplett alle Codes:

Test.htm

<html>
<head>
<title>Design Beta Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table border="0">
<tr><td><div id="hmenu"><a class="hem">{HMENU}</a></div>
<div id="contentob"></div><div id="contentmit"><span style="color:grey;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,</span></div>
<div id="contentun"></div></td></tr>
</table>
</body>
</html>

style.css

body{
background-color: #333333;
width: 940px;
height: 425px;
}
#header{
background-image:url(/beta/header.jpg);
/* oben, rechts, unten, links */
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-repeat: no-repeat;
}
#hmenu{
background-image:url(/beta/hmenu.jpg);
border: 0px;
/* oben, rechts, unten, links */
margin: 0px 0px 40px 149px;
padding: 55px 0px 0px 180px;
width: 494px;
height: 69px;
background-repeat: no-repeat;
}
#contentob{
background-image:url(/beta/content_oben.jpg);
border: 0px;
/* oben, rechts, unten, links */
margin: -95px 0px 0px 0px;
width: 940px;
height: 98px;
background-repeat: no-repeat;
}
#contentmit{
background-image:url(/beta/content_mitte.jpg);
border: 0px;
/* oben, rechts, unten, links */
margin: 0px 0px 0px 0px;
padding: 0px 170px 0px 160px;
width: 940px;
height: 25px;
background-repeat: repeat-y;
}
#contentun{
background-image:url(/beta/content_unten.jpg);
border: 0px;
/* oben, rechts, unten, links */
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 940px;
height: 150px;
background-repeat: no-repeat;
}
a.hem{
color: grey;
font-size: 9px;
}
 
 
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
 
a.boldbuttons{
background: transparent url('media/roundedge-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px Arial; /* Change 13px as desired */
line-height: 22px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px) */
height: 30px; /* Height of button background height */
padding-left: 8px; /* Width of left menu image */
text-decoration: none;
 
}
 
a:link.boldbuttons, a:visited.boldbuttons, a:hover.boldbuttons, a:active.boldbuttons{
color: white; /*button text color*/
}
 
a.boldbuttons span{
background: transparent url('media/roundedge-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 10px 4px 2px; /*Set 10px to be equal or greater than'padding-left' value above*/
}
 
a:hover.boldbuttons{ /* Hover state CSS */
text-decoration: underline;
}
 
 
.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}

Und hier liegt alles:
externer Link

Ich hoffe mir kann jemand helfen!

Liebe Grüße
ZSKing

»inaktiv
_________________________________

0 Mitglieder finden den Beitrag gut.

zitieren

Fr. 28.12.2007 16:45 Uhr #9

.Daniel Mitglied

Fehler 1. Etwas vergessen (Hier geändert)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Design Beta Test</title>
</head>

Fehler 2. Keine Höhenangabe bei Teilen die sich in der Länge ändern sollen. (Hier mal mein Code)

#contentmit {
background: url(/beta/content_mitte.jpg) repeat-y;
padding: 0px 170px 0px 160px;
width: 940px;
}

Fehler 3. Warum Maße für Body? (Hier meine Version)

body {
font-family: verdana;
font-size: 10px;
color: grey;
text-align: center;
margin: 0;
padding: 0;
background: #333333;
}

Edit: Rauß mit <table> <td> <tr> die brauchste nicht

....;)

Zuletzt modifiziert von .Daniel am 28.12.2007 - 16:51:52

0 Mitglieder finden den Beitrag gut.

zitieren

Fr. 28.12.2007 16:55 Uhr #10

ZSKing Mitglied

Registriert seit
05.05.2007

Beiträge
1.026

Beitragswertungen

Danke für deine schnelle und präzise Antowrt, aber das sieht jetzt leider ganz anders aus:

Link

MfG
ZSKing

PS:
Quellcode kannst du ja einsehen!

»inaktiv
_________________________________
0 Mitglieder finden den Beitrag gut.
- zitieren

Fr. 28.12.2007 17:08 Uhr #11

.Daniel Mitglied

Mach mal bitte einen zusätzlichen Eintrag.

css

#inhalt {
width: 600px;
margin-left: 20px;
}

html

<div id="contentob"></div>
<div id="contentmit">
<div id="inhalt">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
<br />
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet
</div>
</div>
<div id="contentun"></div>
</body>
</html>

0 Mitglieder finden den Beitrag gut.

zitieren

Fr. 28.12.2007 17:23 Uhr #12

ZSKing Mitglied

Registriert seit
05.05.2007

Beiträge
1.026

Beitragswertungen

LOL da hätte ich auch selbst drauf kommen können alles nochmal mit nem Div-Container einzugrenzen!

Naja vielen Dank!

»inaktiv
_________________________________
0 Mitglieder finden den Beitrag gut.
- zitieren
Fr. 28.12.2007 17:25 Uhr #13

.Daniel Mitglied

Registriert seit
22.01.2006

Beiträge
163

Beitragswertungen

Richtig. Einfach den Text eingrenzen und die einen oder anderen Abstände anpassen! Fertig:)

Zuletzt modifiziert von .Daniel am 28.12.2007 - 17:26:54
0 Mitglieder finden den Beitrag gut.
- zitieren

Beitrag zur Merkliste hinzufügen

ilch Forum » Allgemein » HTML, PHP, SQL,... » CSS-Frage