PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS:Nur padding-left funktioniert

imk82
2005-07-21, 12:02:35
Hi!
Ich habe ein Problem beim erstellen einer Website.Da ich im Moment keinen Webspace zu verfügung habe kann ich das Problem leider nur schildern.
Es handelt sich um ein simples 3 Spalten(per css) Layout:

Container
Spalte1(Menü) Spalte2(Content) Spalte3(News etc.)

Wenn ich nun in den Content Bereich einen Text einfüge,"klebt" er quasi am Rand.Dies kann man ja mit dem Innenabstand beheben.
Doch wenn ich nun in der CSS Datei beim entsprechenden Element:


div#content /* Der Hauptinhaltsteil*/
{
padding-right:15px; <- schon bis 200px probiert,keine Reaktion
padding-left:15px;
position:absolute;
top: 90px;
left: 125px;
width: 700px;
height: 603px;
}


einfüge,verändert sich im Firefox nur der linke Innenabstand,der Rechte bleibt vollkommen unberührt.Auch wenn ich padding-left ganz lösche,reagiert es nicht.Ich habe auch schon padding-left zum probieren erhöht,das verschiebt den Content nach rechts bis über die 3.Spalte anstatt ne neue Zeile anzufangen,was ja auch nicht sein darf.
Im Internet Explorer funktioniert es völlig normal,d.h. der Innenabstand wird größer,meine Zeilen kürzer und er Abschnitt nach unten länger.
Padding-top bzw. bottom funktionieren übrigens auch normal.Was kann das sein?

imk82
Gast
2005-07-21, 12:15:59
habs ausprobiert aber versteh das problem noch nicht wirklich..

kannst du noch was von deinem quellcode posten, damit ich das besser nachvollziehen kann...

also das gesamte menü.
hab da eh schon so einen verdacht...

mfg der Gast
Nase
2005-07-21, 12:33:21
Das Problem ist wahrscheinlich das unterschiedliche Boxmodell der beiden Browser. Beim Firefox wird das Padding zu dem Width addiert. Wenn du einfach mal einen Rahmen um den Container setzt, wirst du es sehen. Im IE wird der Container allerdings niemals größer als die angegebenen 700px. Unschönes Problem, lässt sich aber alles umgehen.
PatkIllA
2005-07-21, 12:34:23
Was soll sich da verändern?
Du hast eine Breite von 700px angegeben. Das padding kommt an der Seite hinzu und zählt nicht zur angebenen Breite. Der IE macht das im Quirks Modus falsch.
Wenn du eh absolut positionierst, lass das padding einfach weg, mach die Box kleiner und positionier es weiter rechts.

Wenn IE ab Version 6 reicht dann lies dir das (http://www.heise.de/ix/artikel/2004/03/136/) durch (solltest du sowieso machen).
darph
2005-07-21, 12:52:17
Des ist genau das, was ich meinte. ;(
Nase
2005-07-21, 14:00:27
Des ist genau das, was ich meinte. ;(
Wo meinst du was?
darph
2005-07-21, 18:13:37
Wo meinst du was?
http://www.forum-3dcenter.org/vbulletin/showthread.php?p=3280093#post3280093 ;(
Nase
2005-07-21, 19:11:42
http://www.forum-3dcenter.org/vbulletin/showthread.php?p=3280093#post3280093 ;(
Jo, da hast du durchaus Recht.
imk82
2005-07-22, 10:55:26
Hi!
Danke für eure Hilfe,hab das Problem aus dem Anfangspost einfach gelöst indem ich die Box kleiner gemacht habe(Wie von PatkIllA empfohlen).

Es hat sich nun allerdings schon wieder ein neues Problem ergeben:

Ich habe 3 Div-Element: Container(Wo die Website drin ist),Banner,Content.

Ich verwende folgenden Code:

html

<html>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="css/formate.css">
</head>

<BODY>
<div id="container">
<div id="head">
<center><h1>Dies ist der Bannerbereich</h1></center>
</div>

<div id="content" >
<p>
bla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla bla
</p>
</div>
</div>
</BODY>
</html>
/

CSS

#container
{
width:975px;
margin:0px auto;
padding: 15px;
border-left:1px solid black;
border-right:1px solid black;
border-top:1px solid black;
border-bottom:1px solid black;
}

#head /*Kopfleiste/Bannerbereich*/
{
width: 975px;/*width 100% height 10%*/
height: 75px;
background-color:rgb(255,54,39);
float:left;
}

#content /* Der Hauptinhaltsteil*/
{
background-color:rgb(255,255,255);
width:550;
height:auto;
float:left;
padding:0px 0px 0px 25px;
}
/

Das Problem ist,das mein Container die anderen beiden Div-Elemente nicht umschließt bzw. beinhaltet,so wie es eigentlich gedacht ist.Das sieht man am besten im Firefoy anhand des Rahmens,denn wenn es korrekt wäre würde der Rahmen um die ganze Site gehen.
Wieso tritt dieses Problem auf?Container ist doch das Vaterelement von den anderen beiden,oder nicht?

imk82
PatkIllA
2005-07-22, 10:57:34
bei float wird die umgebende Box nicht aufgespannt. Es hilft nach den Floatelementen aber innerhalb des Containers noch ein Element mit style="clear:both" einzubauen. Das kann man ja inhaltsleer machen.
Gast
2005-07-22, 11:13:02
Danke Dir für die extrem(!) schnelle Hilfe.:)Hat einwandfrei funktioniert.

imk82
Imk82
2005-07-27, 15:31:30
Hi!
Ich hab schon wieder ein neues Problem,was mir nicht in den Kopf will.Folgender Code:

CSS:


@charset "iso-8859-1";

#mainmenue
{
text-align:left;
float:left;
margin:0.5em 0em 0em 0em;
}

ul#mainmenuelist
{
border-top:1px solid #0A2864;
border-bottom:1px solid #0A2864;
border-right:1px solid #0A2864;
background-color:#99ACD6;
}

ul#mainmenuelist li
{

}

ul#mainmenuelist li a
{
display:block;
padding:0.28em 1em 0em 0.75em;
font-size: 0.75em;
}

ul.linklist
{
font-family:arial;
padding: 0em;
margin: 0em;
list-style-type: none;
}

.link a:link, li.link a:link , p.link a:link
{
font-family:arial;
color: #0A2964;
text-decoration:none;
}

.link a:visited, li.link a:visited, p.link a:visited
{
font-family:arial;
color: #0A2964;
text-decoration:none;
}

.link a:hover, li.link a:hover, p.link a:hover, .link a:focus, li.link a:focus, p.link a:focus
{
font-family:arial;
background-color:#FF9900;
text-decoration:none;
color: #0A2964;
}

.link a:active, li.link a:active , p.link a:active
{
font-family:arial;
text-decoration:none;
color:#0A2964;
}


HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>
Test
</title>
<meta Name="Publisher" content="test">
<link rel="stylesheet" type="text/css" href="css/mainsite.css">
</head>

<BODY>
<div id="mainmenue">
<ul id="mainmenuelist" class="linklist">
<li class="link"> <a href="index.html">Home </a></li>
<li class="link"> <a href="kontakt_css.html">Vereinsdetails </a></li>
<li class="link"> <a href="trainingszeiten_css.html">Mannschaft</a></li>
<li class="link"> <a href="forum_css.html">Vereinsleben </a></li>
<li class="link"> <a href="weiterelinks_css.html">weiterführende Links </a></li>
<li class="link"> <a href="impressum_css.html">Impressum </a></li>
</ul>
</div>
</BODY>


Mein Problem tritt wieder nur im IE auf:
Sobald ich in ul#mainmenuelist li a display:block; eintrage, stellt der IE zwischen Mannschaft und Vereinsleben einen Abstand dar.Ich kann mir aber nicht erklären warum er das tut.Im Firefox ist alles ok.Kann das mal bitte jemand ausprobieren?Wäre sehr nett.

imk82
PatkIllA
2005-07-27, 15:40:53
Warum lässt du das display:block dann nicht einfach weg?
imk82
2005-07-27, 15:44:00
Weil ich möchte das im Menü,sobald man über einen link geht(hover) die Hintergrundfarbe in ganzer Menübreite verändert wird.Wenn ich das display:block weglasse,ändert sich nur der Hintergrund der Schrift,rechts und links bleibt ein Rand in der ursprünglichen Hintergrundfarbe.

imk82
PatkIllA
2005-07-27, 15:48:45
ok ist nen Argument. Wenn ich alle unnötigen Leerzeichen rauswerfe und die gesamte Liste in eine Zeile packe geht es bei mir auch im IE. Frag mich aber nicht warum.
MadMan2k
2005-07-27, 15:51:50
füg noch folgendes hinzu:


* html ul#mainmenuelist li a {
display: inline;
}


dann haben zwar die IE-Nutzer Pech gehabt, aber zum Surfen sollte man auch nen Browser verwenden ;)
Du kannst natürlich noch versuchen da was mit nem negativen marigin hinzupfuschen...
imk82
2005-07-27, 15:57:10
Hm,ich hab im Umkehrschluß mal ein Leerzeichen hinter Mannschaft gemacht,da sieht es so aus wie ich will.Wenn ich aber alle Leerzeichen rausmache,dann hab ich die Absände überall.Hast Du eine Ahnung wo die herkommen?

imk82
PatTheMav
2005-08-02, 00:50:45
bei float wird die umgebende Box nicht aufgespannt. Es hilft nach den Floatelementen aber innerhalb des Containers noch ein Element mit style="clear:both" einzubauen. Das kann man ja inhaltsleer machen.
Jo das einzig unschöne an der Lösung ist nur, daß man zusätzlichen Markup einfügen muss :)

Für Firefox und Opera ginge nämlich auch folgendes : div.class:after {
display: block;
padding: 0px;
margin: 0px;
height: 0px;
clear: both;
visibility: hidden;
content: ".";
}

Pseudo-Elemente sind recht mächtig, finden aber keine weite Verbreitung. Aber damit kannst hinter das letzte Content-Element per Pseudoklasse einen unsichtbaren "." setzen, der aber dank "clear: both;" die Floats einschliessen lässt.