[CSS] Div erweitern

scriper

scriper

Eta Capricorni
ID: 57943
L
3 Mai 2006
2.721
316
Hallo!

Ich hab mir ein Design gesliced, mag aber Tabellen zum "zusammenbauen" nicht.

Deshalb wollte ich es mittels DIVs und CSS machen.

Nun mein Problem:
Tabellen erweitern sich automatisch nach unten, wenn der Text länger wird.

Wie schaffe ich das selbe mit Divs?

Also ich hab ihen ne Linie über die ganze Breite,
dann links und rechts nen Balken, dazwischen soll der Inhalt.
Darunter nochmal ne Linie über die ganze Breite.

Hab grad keinen Plan wie ich das sinnvoll lösen kann.

Danke schonmal für Ideen und Lösungsvorschläge... ;)

Edit: Hab was gefunden: overflow:auto...

is aber blöd son Scrollbalken...


Edit2: Nochwas: Wie bekomme ich ein Div mittig auf der Site platziert? ich find nix was funzt...
 
Zuletzt bearbeitet:
scriper schrieb:
Nun mein Problem:
Tabellen erweitern sich automatisch nach unten, wenn der Text länger wird.

Wie schaffe ich das selbe mit Divs?
[...]
Edit: Hab was gefunden: overflow:auto...

is aber blöd son Scrollbalken...
Zum Vergrößern anklicken....
overflow steht default auf auto, d.h. der Tag wird automatisch größer, wenn der Inhalt ned reinpasst. Du darfst nur keine feste Höhe mit height eingeben. Allerhöchstens ein min-height verwenden, den ignoriert dir aber der IE.
scriper schrieb:
Also ich hab ihen ne Linie über die ganze Breite,
dann links und rechts nen Balken, dazwischen soll der Inhalt.
Darunter nochmal ne Linie über die ganze Breite.
Zum Vergrößern anklicken....
Sprichst du von Rahmen ? :hö:
scriper schrieb:
Edit2: Nochwas: Wie bekomme ich ein Div mittig auf der Site platziert? ich find nix was funzt...
Zum Vergrößern anklicken....
Mittels margin ;)
HTML: 
margin: 10px auto 10px auto;
 
scriper schrieb:
habs jetzt mal so gelöst:
*klick*
Zum Vergrößern anklicken....
Hab mich mal umgesehen ;)
Also in die Mitte würd ichs schon noch rücken :mrgreen:

Was mir in deinem Stylesheet aufgefallen is:
Für maindiv verwendest du ne Klasse, da könntest du ne ID verwenden.
Die Formattierungen hast du als ID drinstehen. Spätestens, wenn du 2 Sachen fett machen willst, is die Seite nimmer valide, weil IDs eindeutig sein müssen. Hier also Klassen verwenden.
 
theHacker schrieb:
Hab mich mal umgesehen ;)
Also in die Mitte würd ichs schon noch rücken :mrgreen:

Was mir in deinem Stylesheet aufgefallen is:
Für maindiv verwendest du ne Klasse, da könntest du ne ID verwenden.
Die Formattierungen hast du als ID drinstehen. Spätestens, wenn du 2 Sachen fett machen willst, is die Seite nimmer valide, weil IDs eindeutig sein müssen. Hier also Klassen verwenden.
Zum Vergrößern anklicken....
ach die müssen einmalig sein? kay, thx.

und wieso is des net mittig?

also bei mir siehts zumindest so aus....

...auch wenn ich lieber was hätte, was sich der Fenstergröße anpasst und dann beispielsweise mehr nach oben und links rutscht

PS: hab nochwas eingefügt, was IE-User freundlich darauf hinweist, doch nen gescheiten Browser zu verwenden...
...ich hasse IE :evil: ...und werde deshalb auch net die PNGs in Gifs konvertieren...
 
scriper schrieb:
und wieso is des net mittig?
Zum Vergrößern anklicken....
Deswegen:
HTML: 
.maindiv {
    position: absolute;
    visibility: visible;
    top: 10px;
    left: 112px;
}
Screen kommt gleich ;)
scriper schrieb:
PS: hab nochwas eingefügt, was IE-User freundlich darauf hinweist, doch nen gescheiten Browser zu verwenden...
...ich hasse IE :evil: ...und werde deshalb auch net die PNGs in Gifs konvertieren...
Zum Vergrößern anklicken....
Hehe, klasse :mrgreen:
Ganz so krass wie bei mir musses ja auch ned immer sein.

Ich hab jetzt mal ein wenig rumgespielt an deinem CSS (Ein Hoch auf FF und EditCSS on the fly 8)). Wegen deiner absoluten Positionierung aller Elemente is irgendwie keines im Maindiv drinnen :-? Probier mal aus und geb dem maindiv mal border: 10px solid red ;)

Ich hab probeweise mal das CSS von thehacker.ws eingesetzt, das funktioniert, würde aber die ganze Seite auf vertikal zentrieren. Du willst ja strecken lassen, das passt also ned so gut.
Probiers aber mal aus:
Code: 
width: 800px; height: 600px;
position: absolute;
margin-left: -400px; margin-top: -300px;
top: 50%; left: 50%;

Screens:
1) ganz normal
2) theHacker.ws-CSS mit IE-UserAgent

 
Hey danke, werd ich morgen mal einbaun.

ich bin halt davon ausgegangen, dass die meisten ne 1024*768er Auflösung verwenden...

Aber ich muss auch mal ehrlich sagen, dass hier
Code: 
margin-left: -400px; margin-top: -300px;
versteh ich net so ganz...

Edit: @screens: Wieso bekommst du da den Hinweiß angezeigt, obwohl du FF verwendest? hatte da doch ne Abfrage drin.... *denk*

Edit2: Wo gibts die Webdeveloper-Extention auf deutsch? hab se nur in EN...
 
scriper schrieb:
Edit2: Wo gibts die Webdeveloper-Extention auf deutsch? hab se nur in EN...
Zum Vergrößern anklicken....
Kp. Hab se auch noch nie in Deutsch gesehen.
Is doch eh egal. Wenn ich mit <img>-Tags arbeite, würde mich "Bilder" nur stören ;)
scriper schrieb:
Aber ich muss auch mal ehrlich sagen, dass hier
Code: 
margin-left: -400px; margin-top: -300px;
versteh ich net so ganz...
Zum Vergrößern anklicken....
Wegen meiner vertikalen Zentrierung musste ich das so machen.
left:50%; top:50%; platzieren die Seite in der Mitte, allerdings nicht den Div, sondern damit is nur die linke, obere Ecke des Divs in der Mitte.
Ergo muss ich den Div um die Hälfte seiner Breite und Höhe nach links und oben verschieben. Wenn du width und height änderst, müsstest du auch die margin-Werte ändern, damit es funktioniert.

Try yourself ;)
 
theHacker schrieb:
Wegen meiner vertikalen Zentrierung musste ich das so machen.
left:50%; top:50%; platzieren die Seite in der Mitte, allerdings nicht den Div, sondern damit is nur die linke, obere Ecke des Divs in der Mitte.
Ergo muss ich den Div um die Hälfte seiner Breite und Höhe nach links und oben verschieben. Wenn du width und height änderst, müsstest du auch die margin-Werte ändern, damit es funktioniert.

Try yourself ;)
Zum Vergrößern anklicken....

ah, das ergibt natürlich einen Sinn...naja, nach n paar Bier lässt das Denkvermögen spürbar nach :ugly:

Danke!
 
scriper schrieb:
ah, das ergibt natürlich einen Sinn...naja, nach n paar Bier lässt das Denkvermögen spürbar nach :ugly:
Zum Vergrößern anklicken....
Drum programmiere ich, wenn unter Ethanol-Einfluss, dann nur mit Wodka :yes: :mrgreen:
 
scriper schrieb:
Schreibt man das net mit "V"?
Zum Vergrößern anklicken....
OFFTOPIC ! :ugly:

...kann man schreiben, wie man will. Bin kein Russe, aber ich glaub, da drüben schreibt mans mit "V" und hier mit "W". GoogleWars: 2,3M (W) : 800k (V)

btw. trink ich grad Wein und programmier nix mehr ;)

@Topic:
Wenn die Seite nach unten hin offen bleiben soll, reicht mein Vorschlag aus Post #3. Voraussetzung ist allerdings, dass du mit absoluter Positionierung aufhörst.
 
scriper schrieb:
da bekomm ich die positionierung mit top und left aber net hin *fg*
Zum Vergrößern anklicken....
Du solltest ohne top und ohne left auskommen, wenns ordentlich is ;)

Hast du dir schon mal den Artikel über CSS-Layouts auf de.selfhtml.org durchgelesen ?
Zieh dir mal ne Kopie von deiner Seite und arbeite dein CSS nochmal von vorn aus, obige Quelle als Leitfaden. Es wird besser, glaub mir ;)
 
Hallo zusammen!

ich hab nochmal ein bisschen gebastelt und das CSS umgebaut:

https://carrillo-castillo.de/design/design.html

jmd ne Fachkundige Meinung dazu?

Besser als die erste Version ( www.carrillo-castillo.de )?

Nochwas: ich musste die Breite vom div#nav auf 147px statt auf die volle Größe von 150 stellen, damit der "content-Bereich" im IE nicht nach unten rutscht, wieso ist das so?

Und noch eins: Warum werden die Grafiken dunkler, wenn ich Sie als Hintergrund in der CSS-Datei einbinde (zum Vergleich die "normalen" Farben auf www.carrillo-castillo.de )?

Edit: hab festgestellt das die Farben nur lokal bei mir aufm Rechner dunkler werden, seltsam...
 
auf jeden fall besser als vorher. bei so einer kleinen seite kann man eh nicht viel falsch machen.

und wenn man floatet bitte auch am ende clearen. you know? ;)

mach aus dem menü doch ne liste, kommt besser.

achja, oben beim menü img fehlt noch das " /" am ende.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

News-Bot
News Auch Woidke will Liste sicherer Herkunftsländer erweitern
Antworten
2
Aufrufe
345
Gelöschtes Mitglied 142857
G
Zurück
Oben