• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Verrutschte DIVs und ein paar Fragen [erledigt]

Status
Für weitere Antworten geschlossen.
Teela

Teela

Mitglied
Hallo zusammen!

Ich möchte bei meiner Homepage eine Navigation mithilfe einer
ul-Liste erstellen. Nun habe ich aber folgendes Problem:

Die Liste wird so stark eingerückt, dass sie schon am rechten Rand
der Navigationsleiste klebt, wie kann ich mit CSS definieren,
wie weit sie eingerückt werden soll, bzw. ob überhaupt.

Wie kann ich bei list-style-type ein auf der Spitze stehendes Quadrat
(also ein Karo) als Auflistungszeichen definieren?

Ich hoffe, ihr könnt mir weiterhelfen.
Teela
 
Ich hab mir das jetzt mal durchgelesen,
aber so wie ich das sehe, gibt es da keine Möglichkeit,
das Einrücken der Liste zu verkleinern oder zu verhindern,
oder hab ich was übersehen?

EDIT: Ich habs jetzt mal damit probiert:

Code: 
ul {
list-style-position: outside;
list-style-image: url(button.gif);
margin-left: 20px;
margin-top: 5px;
}

Im Internet Explorer stimmt jetzt alles,
bei Firefox dagegen ist es noch mehr verschoben, als vorher.
Was muss ich machen, damit es bei beiden funktioniert?
 
Hi Teela

das einrücken der Listeneinträge verhinderst du über die "margin" bzw. "padding" Werte des UL-Elementes. ;)

Gruß
Hobbyuser
 
ok, jetzt funktioniert es ^^

Ich hab jetzt noch ein Problem und will nicht gleich noch ein neues Thema aufmachen.
Ich hab das Layout mit divs gestaltet, nur passt die Breite irgendwie nicht zueinander:



Hier der dazugehörige CSS-Code:

Code: 
#header {
float: left;
width: 900px;
height: 150px;
text-align: right;
border-top: 1px solid #999;
border-right: 1px solid #999;
border-left: 1px solid #999;
}

#navigation {
float: left;
width: 900px;
height: 40px;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
border-left: 1px solid #999;
}

#sidebar1 {
float: left;
height: 700px;
width: 150px;
top: 0;
border-left: 1px solid #999;
}

#content {
float: left;
height: 700px;
width: 576px;
border-right: 1px solid #999;
border-left: 1px solid #999;
}

#sidebar2 {
float: left;
height: 700px;
width: 170px;
top: 0;
border-right: 1px solid #999;
}

Ich hab schon versucht, den width-Wert vom #content
zu erhöhen, aber dann springt das Fenster in die 'nächte Zeile' -.-
Was muss ich einstellen, damit der rechte Rand genauso glatt wie der Linke ist?
 
Also eigentlich dürfte die letzte Spalte (#sidebar2) erst verspringen wenn die Seitenbreite nicht mehr ausreicht um alle 3 Spalten nebeneinder darzustellen.

Das Problem mit dem Versatz entsteht durch falscher Breitenangaben.
FORMEL: #sidebar1 + #content + seidebar2 + 2xrahmendicke (je 1px) = gesamtbreite
IN ZAHLEN: 150px + 576px + 170px + 2px = 898px
Dein #header und deine #navigation sind jedoch 900px breit. Die Lösung kann also nur sein Alles auf die selbe Breite zu bringen. Entweder #content-Breite um 2px erhöhen oder #header und #navigation 2px schmaler machen. ;)
 
Ok, das mit dem erhöhen hatte nicht funktioniert,
aber das Verkleinern der oberen Teile ging jetzt.
Vielen Dank für deine Hilfe ^^

Aber jetzt hat sich ein weiteres Problem ergeben;

Ich wollte ganz unten eine footer-Leiste einbauen,
die auf allen vier Seiten umrahmt ist und nach unten hin
noch einen kleinen Abstand hat.

Hier mein Code:

Code: 
#footer {
float: left;
width: 900px;
height: 20px;
text-align: center;
border-top: 1px solid #999;
border-right: 1px solid #999;
border-left: 1px solid #999;
border-bottom: 1px solid #ßßß;
margin-bottom: 10px;
}

und hier das Resultat im Internet Explorer und Firefox:





Die untere Linie fehlt, nebenbei ist die Schrift einmal in der Mitte
und einmal ganz oben im Footer.

HTML-Code:

Code: 
<div id="footer">


Copyright by anime4ever.info</p>
</div>

Was muss ich einstellen, damit der Footer unten geschlossen ist,
einen Abstand zum Seitenende hat und die Schrift bei allen Browsern
in der Mitte ist?
 
Teela schrieb:
Was muss ich einstellen, damit der Footer unten geschlossen ist,
einen Abstand zum Seitenende hat und die Schrift bei allen Browsern
in der Mitte ist?
Zum Vergrößern anklicken....
1.) Du musst dem Border die richtige Farbe geben (IST: #ßßß; SOLL: #999)
2.) Das ist eigentlich mit "magin-bottom:10px;" eingestellt, ansonsten im BODY "padding-bottom:20px;" für 20 Pixel Abstand angeben.
3.) Ist mit "text-align:center;" schon gemacht.
 
Ok, danke, jetzt funktiniert es.

Aber eine Frage habe ich noch:
Wie verhindere ich es, dass manche Browser zwischen die divs
manchmal Abstände reinmachen, wo eigentlich keine hinsollen?
(Manchmal nur weiße Striche mit 1px Breite, aber das Layout sollte
komplett zusammenhängend sein, da passt das nicht.)

Teela
 
Ok, das funktioniert jetzt auch ^^

Jetzt hat sich aber ein weiteres Problem ergeben: :oops:

Ich will ans Ende der Seite einen Footer einbauen,
der links und rechts eine Randgrafik (also einen zusätzlichen div-Bereich) hat.

</div>
<div id="left3">
</div>
<div id="footer">
</div>
<div id="right3">
</div>

Leider springt der div "left3" immer ganz nach rechts,
die anderen beiden dann in die nächste Zeile -.-

Hier der entsprechende CSS Code
(Ich finde den Fehler einfach nicht -.-)

Code: 
#left3 {
float: left;
height: 20px;
width: 15px;
margin: 0px;
background-image: url(../images/pictures/left.GIF);
border-bottom: 1px solid #000;
}

#footer {
float: left;
width: 918px;
height: 19px;
margin: 0px;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}

#right3 {
float: left;
height: 20px;
width: 15px;
margin: 0px;
border-bottom: 1px solid #000;
background-image: url(../images/pictures/right.GIF);
}

DIe Gesamtbreite des Ganzen beträgt 950px.
Ich hoffe, jemand sieht, was ich falsch gemacht habe...

Teela
 
#right ist mit float:left ausgerichtet.

Ausserdem: Versuchs mal mit clear:both; statt float:left; beim #footer
Code: 
#footer {clear:both; ...}
 
flapo schrieb:
#right ist mit float:left ausgerichtet.
Zum Vergrößern anklicken....
Das stimmt schon, dass ist nämlich bei den Ebenen darüber genauso,
da hat es so funktioniert.
(steht nebenbei auch so in meinem Webdesign-Buch ^^)

flapo schrieb:
Ausserdem: Versuchs mal mit clear:both; statt float:left; beim #footer
Code: 
#footer {clear:both; ...}
Zum Vergrößern anklicken....

Hab ich, das Resultat war, dass nun alle drei divs untereinander sind,
sie sollen aber alle nebeneinander :wink:

Hier mal ein Bild, vielleicht weiß dann jemand, was los ist:



So wie ich das sehe, wird das div "left 3" direkt unter dem div "right2"
(der rechten Randspalte darüber) angelegt, es soll aber ganz nach links.
Es steht schon auf float: left; also wie kriege ich es hin, dass es auch wirklich nach links geht???

Dann hätte ich noch ein paar grundsätzliche Fragen:
- sind in einer HTML-Datei 2 meta-tags "keywords" möglich,
dh, werden beide von den Suchmaschinen indexiert?
- kann man keywords, die für die gesamte Homepage gelten,
in CSS schreiben?
- wie formuliert man einen mouseover-effekt in CSS?
- kann man javascripte, die für die gesamte Homepage gelten sollen,
in die CSS-Datei reinschreiben, und wenn ja, wie?

Hoffe, mir kann jemand weiterhelfen und meine Fragen beantworten ^^

Teela

EDIT: Tut mir echt Leid wegen dem Doppelpost,
aber ich hab jetzt eine Woche gewartet und keiner hat mir helfen können,
weiss es wirklich keiner, oder warum antwortet niemand?

Mod-Edit: Doppelpost entfernt - nicht entschuldigen sondern den "edit" Button oben rechts benutzen (Hobbyuser)
 
Teela schrieb:
Dann hätte ich noch ein paar grundsätzliche Fragen:
- sind in einer HTML-Datei 2 meta-tags "keywords" möglich,
dh, werden beide von den Suchmaschinen indexiert?
- kann man keywords, die für die gesamte Homepage gelten,
in CSS schreiben?
- wie formuliert man einen mouseover-effekt in CSS?
- kann man javascripte, die für die gesamte Homepage gelten sollen,
in die CSS-Datei reinschreiben, und wenn ja, wie?
Zum Vergrößern anklicken....

1. Keywords werden nach dem Text indiziert nicht nach den META-Tags, weshalb solche Tags überflüssig sind.

2. Nein!

3. Siehe bei selfhtml. LINK:http://de.selfhtml.org/css/formate/zentrale.htm#pseudoformate

4. Nein!

Zu 2. und 4.:
Eine CSS Datei ist ausschließlich für die Formatierung zuständig, Inhalte gehören in die HTML Datei. Es gibt jedoch die Möglichkeit, Inhalte die auf allen Seiten vorkommen sollen, mit PHP dynamisch in jede Datei mit einzubinden (Siehe PHP-Funktioin "include").
 
hobbyuser schrieb:
1. Keywords werden nach dem Text indiziert nicht nach den META-Tags, weshalb solche Tags überflüssig sind.
Zum Vergrößern anklicken....

Wofür gibt's die dann überhaupt? :roll:

Naja, danke für deine Hilfe ^^'

Aber mein Hauptproblem mit den verrutschten divs besteht leider
nach wie vor, ich kann den Fehler einfach nicht finden -.-

Bitte dringend um Hilfe

Teela
 
Nun, Meta-Tags für Keywords wurden früher von den Suchmaschinen benutzt. Irgendwann wurde dann aber erkannt, dass irgendwelche Leute da etwas reingeschrieben haben, ohne dass das wirklich auf der Seite vorkommt.
 
Wenn du weitere Hilfe zu deinem Design haben willst, solltest du mal ein Link zu deiner Seite posten und nicht nur Screenshots machen. Auch wäre es gut das Problem in dem Post zur aktuellen Seite nochmals zu beschreiben. ;)
 
Ok, ich hab die nötigen Daten mal hier hochgeladen:

http://anime4ever.info/test/

Das Problem ist, dass der Footer nicht in einer Zeile dargestellt wird,
da der erste Teil direkt unter dem vorigen div rechts und nicht ganz links
dargestellt wird. Daher rutscht der Rest in die nächste Zeile.
Der div ist mit float: left; ausgerichtet, daher verstehe ich nicht,
warum er rechts angezeigt wird.

Hier der Link zur CSS-Datei:
http://anime4ever.info/test/css/style01.css

Teela
 
Also Teela ich würde aus der Div "#right2" das "float:left;" rausnehmen, denn diese Div soll nicht mehr umflossen werden. ;)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben