Anmelden

Archiv verlassen und diese Seite im Standarddesign anzeigen : problem mit css?!


Gast
2008-08-10, 12:25:35
hai,
habe ein kleines verständnisproblem mit css und html. ich möchte ne hauptbox machen, wo news, und text usw reinkommen.
jetzt weiss ich nur nicht ob ich die mit css formatieren sollte, weil sie in den ecken gifs bekommen soll (zb so abgerundete ecken).
mit nem html table wüsste ichs wies geht, nur gibts bei css ja nur margin und border, wo ich die einsetzen könnte?

rotalever
2008-08-10, 12:45:32
Für div-boxen gibt es ein paar nette Verfahren, wie man rounded corners macht. Zum beispiel könnte man mehrere Divs übereinander legen, die jeweils eine der Ecken enthalten und in das oberste fügt man dann den Content ein. Also sowas:
<div class="corner_oben_links"><div class="corner_oben_rechts">...<div class="content"></div>...</div></div>

Gast
2008-08-10, 13:14:23
Okay, ein bischen schwierig zu organisieren aber wird wohl gehn. Ich bräuchte also 8 Divs mit Bildern, in alle 4 ecken kommen die gifs mit abgerundeten ecken. in die vier horizontalen und vertikalen dann sich wiederholende gifs. puhh.....hoffe das krieg ich hin.

Gast
2008-08-10, 13:21:37
Also sähe das so aus? :

http://666kb.com/i/b149zhzy7mxsq9y39.jpg

Was mach ich mit ,Margin,Border und Padding in den Divs? Auf 0 setzen oder weglassen?

DanMan
2008-08-10, 13:55:11
Ich würde das mit einer der zahlreichen Javascript Lösungen machen (z.B.: http://acko.net/blog/anti-aliased-nifty-corners ). Das bläht sonst nur den (statischen) HTML Code auf, und das mag ich pers. überhaupt nicht.

Gast
2008-08-10, 13:58:19
Ich würde das mit einer der zahlreichen Javascript Lösungen machen (z.B.: http://acko.net/blog/anti-aliased-nifty-corners ). Das bläht sonst nur den (statischen) HTML Code auf, und das mag ich pers. überhaupt nicht.
auch ne lösung, aber ich will eigentlich keine normalen runden ecken, sondern richtige gifs nehmen, damits zum restdesign passt.

DanMan
2008-08-10, 14:04:33
auch ne lösung, aber ich will eigentlich keine normalen runden ecken, sondern richtige gifs nehmen, damits zum restdesign passt.
Ach du meinst mit irgendeiner nicht einfach nur runden Form. Ja, dann geht das natürlich so nicht.

Nun, da gibt es nicht DEN richtigen weg. Kommt auf das Design deiner Seite an - wie z.B. auf den Hintergrund (einfarbig?). Je nach dem ist es mehr oder weniger Aufwand. Könntest auch mit nur 3 oder 4 zusätzlichen Divs hinkommen. Oder eben auch wieder mit JS, und komplett ohne zusätzliche (statische) Divs.

Aber auch da gibts sicher irgendwo im Netz schon Templates für. Einfach mal Google fragen, falls es dir zu schwierig wird. Oder natürlich wieder hier.

Gast
2008-08-10, 14:15:49
Kommt auf das Design deiner Seite an - wie z.B. auf den Hintergrund (einfarbig?). Je nach dem ist es mehr oder weniger Aufwand. Könntest auch mit nur 3 oder 4 zusätzlichen Divs hinkommen.

Aber auch da gibts sicher irgendwo im Netz schon Templates für. Einfach mal Google fragen, falls es dir zu schwierig wird. Oder natürlich wieder hier.
Hmm...also der Body meiner Seite (über css formatiert) ist einfarbig. Die gifs krieg ich auch transparent hin, so das der bodyhintergrund durchscheint, aber das brauch ich in diesem fall nichtmal.
Was mich immer noch ein bischen verwirrt ist, wie ich die Divs dann formatiere.
Also ob ich die gifs über css angebe,
zb. : "background-image:url(gifs/linke-ecke.gif);" in der css datei zb. als klasse "linke-ecke" angebe. und dann als <div class="linke-ecke"> in die html schreibe? Ist das sinnvoll oder sollte mans in diesem Fall nicht tun?

rotalever
2008-08-10, 14:25:14
Hier, nimm einfach den Generator, die Grafiken kannst du dann ja ggf. ersetzen. http://mierendo.com/software/rounded_css_boxes/

Gast
2008-08-10, 14:41:26
Ich habs jetzt mal so geschrieben wie ichs verstanden hätte :

<html>
<head>

<style type="text/css">


/* Box für den Content */

.contentbox {
background-color:#ffffff;
margin:20%
border:10px;
padding:8px
}

.box-linke-ecke-oben {
background-image:url(gif/box-linke-ecke-oben.gif);
width:20px;
height:20px;
}

</head>
<body>

<div class="box-linke-ecke-oben"> </div>
<div class="box-oben"> </div>
<div class="box-rechte-ecke-oben"> </div>
<div class="box-links"> </div>
<div class="contentbox"> </div>
<div class="box-links"> </div>
<div class="box-rechts"> </div>
<div class="box-rechte-ecke-oben"> </div>
<div class="box-unten"> </div>
<div class="box-linke-ecke-oben"> </div>


</body>

</html>

rotalever
2008-08-10, 15:24:38
Also man sollte die Divs ineinander verschachteln, dass sie sich überlagen. Also nicht <div></div><div></div> sondern <div><div></div></div>

Gast
2008-08-10, 15:25:03
Hier, nimm einfach den Generator, die Grafiken kannst du dann ja ggf. ersetzen. http://mierendo.com/software/rounded_css_boxes/
hmm, hab das jetzt mal gemacht und es bringt eigentlich genau das ergebnis was ich gesucht hab, jedenfalls von der ordnung her. krieg ich glaub ich so dann auch nächstes mal per hand hin. danke.

Gast
2008-08-10, 15:29:03
Also man sollte die Divs ineinander verschachteln, dass sie sich überlagen. Also nicht <div></div><div></div> sondern <div><div></div></div>
das hab ich jetzt zwar verstanden, kann mir aber bildlich nicht so recht vorstellen wie sich das auswirkt.

rotalever
2008-08-10, 16:01:05
das hab ich jetzt zwar verstanden, kann mir aber bildlich nicht so recht vorstellen wie sich das auswirkt.
Exakt das was der Generator auch macht.
Das Problem ist halt, dass man immer nur ein Background-Image definieren kann, man aber 4 Ecken + möglicherweise 4 Kanten hat. Wenn man jetzt zum Beispiel 4 Divs überlagert kann man auch vier background-images im CSS definieren und somit alle 4 Ecken mit einer eigenen Grafik ausfüllen. Der restliche Teil der divs bleibt ja immer transparent und deshalb klappt das mit dem Überlagern.
Es gibt zwar noch andere Techniken aber das scheint die einzige zu sein, wo man die box dann auch vernünftig in der Größe - nämlich beliebig - skalieren kann.

DanMan
2008-08-10, 16:12:55
Wenn man alle Extra-Divs mit einem Div umschließt hat man vermutlich hinterher weniger Positionierungsprobleme, weil es dann nur noch auf die Pos. des umschließenden Divs ankommt.

rotalever
2008-08-10, 16:21:01
Wenn man alle Extra-Divs mit einem Div umschließt hat man vermutlich hinterher weniger Positionierungsprobleme, weil es dann nur noch auf die Pos. des umschließenden Divs ankommt.
Wenn man die divs, wie ich beschrieben hab, ineinander legt, umschließen die sich doch sowieso :confused:

Gast
2008-08-10, 16:46:49
Es gibt zwar noch andere Techniken aber das scheint die einzige zu sein, wo man die box dann auch vernünftig in der Größe - nämlich beliebig - skalieren kann.
Gut, nur wie skaliere ich die ganze box? Die Box soll zentriert in html dokument auftauchen und sich auch an die fenstergröße anpassen und einen bestimmten abstand nach oben, rechts und links haben.

rotalever
2008-08-10, 17:15:50
Gut, nur wie skaliere ich die ganze box? Die Box soll zentriert in html dokument auftauchen und sich auch an die fenstergröße anpassen und einen bestimmten abstand nach oben, rechts und links haben.
Du hast ja mehrere geschachtelte divs. Die inneren divs sind alle so eingestellt, dass sie immer so groß sind, wie das äußere. Du musst also nur das äußere Div positionieren bzw. dessen größe bestimmen und die anderen passen sich automatisch an. Vertikale Zentrierung ist aber mit CSS etwas schwierig.

Gast
2008-08-10, 17:24:48
Du hast ja mehrere geschachtelte divs. Die inneren divs sind alle so eingestellt, dass sie immer so groß sind, wie das äußere. Du musst also nur das äußere Div positionieren bzw. dessen größe bestimmen und die anderen passen sich automatisch an. Vertikale Zentrierung ist aber mit CSS etwas schwierig.
Ja, ok. Warum ist die vertikale Zentrierung mit CSS schwierig?

DanMan
2008-08-10, 19:20:49
Wenn man die divs, wie ich beschrieben hab, ineinander legt, umschließen die sich doch sowieso :confused:
Ich hab dir ja auch garnicht widersprochen, sondern nur versucht den Grund nochmal zu erläutern.
Ja, ok. Warum ist die vertikale Zentrierung mit CSS schwierig?
Weil sie quasi nicht existiert. Zumindest nicht, wenn das zu zentrierende Objekt nicht auch eine feste Höhe besitzt. Wie immer lässt sich das mit JS natürlich aushebeln (bin z.Zt. auf dem JS-Trip :D ).

Sephiroth
2008-08-10, 19:25:23
Ja, ok. Warum ist die vertikale Zentrierung mit CSS schwierig?
Weil man einen Abstand nach oben und unten des inneren Elements mit unbekannter Höhe zum äußeren Element angeben/berechnen müsste, so dass die beiden Abstände je etwa 50% des freien Platzes ausmachen.

<div id="outer-container">
<div id="inner-content"> inhalt unterschiedlicher höhe/länge </div>
</div>

Eine Variante wie es geht, wird hier beschrieben: Vertical Centering in CSS (http://www.jakpsatweb.cz/css/css-vertical-center-solution.html)
Aber auch da geht es nur weil #outer eine feste Höhe hat.

Gast
2008-08-10, 20:37:51
danke soweit.
noch eine letzte frage, die mich grade ein bischen verzweifeln lässt.
ich möchte einen div container haben das ein hintergrundbild hat. daneben soll noch ein div container sein, der ein hintergrundbild hat das sich wiederholt, und vertikal die webseite abschliesst
(also mit der Fenstergröße mitgeht, das macht man ja in %, richtig?). also so :
http://666kb.com/i/b14kvrzlc1t8jum6t.jpg

So wie ichs nun verstanden habe muss ich zwei divs verschachteln, also in der html datei nacheinander schreiben, und beide danach schliessen: <div1><div2></div><div>.
in der css datei habe ich beiden hintergrund-gifs eine feste höhe gegeben (die sind beide gleich in diesem Fall).
Nur verstehe ich nicht, welches div, also div1 oder 2, in diesem Fall zuerst geladen wird und wie ich beide divs mit breiten versehen muss, damit sie nebeneinander angezeigt werden.

ich hatte erst div1 eine breite gegeben, wie breit das gif ist in pixeln, und das geht auch, aber sobald ich den zweiten container lade, verschwindet der erste, wird sozusagen überschrieben? welches div hat die höhere priorität?

Gast
2008-08-11, 12:06:07
kanns niemand sagen? ich häng nur an diesem problem.

rotalever
2008-08-11, 14:47:41
kanns niemand sagen? ich häng nur an diesem problem.
Ich hab nicht genau verstanden, was du eigentlich als Ziel hattest? Beschreibt die Grafik das Ziel oder den jetzigen Zustand?

Gast
2008-08-11, 19:04:55
Ich hab nicht genau verstanden, was du eigentlich als Ziel hattest? Beschreibt die Grafik das Ziel oder den jetzigen Zustand?
das Ziel. Wenn ich 2 divs ineinander verschachtel, also <div><div></div></div>,
scheinen die sich zu überlagern und nicht nebeneinander zu stehen. auch wenn ich die breiten, und ausrichtungen von beiden angebe.

rotalever
2008-08-11, 19:23:27
das Ziel. Wenn ich 2 divs ineinander verschachtel, also <div><div></div></div>,
scheinen die sich zu überlagern und nicht nebeneinander zu stehen. auch wenn ich die breiten, und ausrichtungen von beiden angebe.
Dann ist die Lösung wohl diese nicht zu verschachteln sonder nacheinander zu machen also <div></div><div></div> und entsprechende Breitenangaben wählen, dass sie nebeneinander passen.

Gast
2008-08-11, 21:32:42
Dann ist die Lösung wohl diese nicht zu verschachteln sonder nacheinander zu machen also <div></div><div></div> und entsprechende Breitenangaben wählen, dass sie nebeneinander passen.
ehm ja. nun steht <div1> mit bild ganz oben, dann unter dem bild, das sich wiederholende <div2> also nicht nebeneinander.

Gast
2008-08-11, 21:38:20
ich schätze die breitenangaben sind das problem? Also <div1> hat die breitenangaben des gifs (bspw. width 100px height 100px), und <div2> hat zb. height 100px width 100% (weils ja mit dem browser mitschrumpfen soll).

Gast
2008-08-11, 22:01:46
habs hinbekommen. das ging nur mit float.

Gast
2008-08-11, 22:24:53
naja, unter IE gehts nicht, nur FF.............

rotalever
2008-08-11, 23:14:05
naja, unter IE gehts nicht, nur FF.............
Da gibt es glaub ich so ein bug. Wenn du beide zum Beispiel 50% breit machst, geht das in IE nicht. Da musst du das eine dann 49.9% oder so breit machen.

Gast
2008-08-11, 23:58:28
ich hab auch mit diesem css box generator eine box gemacht. wenn ich die in der mite des browsers haben möchte, also mit margin zb. auf 40%, dann gehts das im ff, im IE aber nicht, die box wird dann viel größer.

rotalever
2008-08-12, 12:34:05
ich hab auch mit diesem css box generator eine box gemacht. wenn ich die in der mite des browsers haben möchte, also mit margin zb. auf 40%, dann gehts das im ff, im IE aber nicht, die box wird dann viel größer.
Wenn du etwas horizontal zentrieren willst, dann solltest du margin-left: auto; margin-right: auto; nutzen. Das geht nur im IE5 nicht, aber den benutzt eh keiner.

Eigentlich sollte das dann im IE (zumindest Version 6) alles genauso aussehen wie im Firefox. Wenn es mit den genannten Änderungen nicht klappt, kannst du ja auch mal den relevanten CSS und HTML code posten.

Gast
2008-08-12, 12:49:15
ich probiers nachher nochmal. wenns nicht klappt poste ich mal den ganzen code.

Gast
2008-08-14, 13:19:58
Ich habs nicht hinbekommen. Hier ist die Zip mit dem code :
http://rapidshare.com/files/137252861/testseite.zip.html

so sollte es eigentlich aussehen :

http://666kb.com/i/b18bxdjx6wb74h73w.jpg

DanMan
2008-08-14, 19:28:00
Wie wärs damit (falls du noch keinen <body> Hintergrund hast):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<style>
* { margin:0; padding:0}
body {
background:#000000 url("toplogo-line.gif") repeat-x;
}
/* Box fuer das Logo */
.toplogobox_l {
height: 118px;
background-image: url("toplogo.gif");
background-repeat: no-repeat;
}
</style>
</head>
<body>

<div class="toplogobox_l"></div>

</body>
</html>

Gast
2008-08-17, 10:29:21
danke, also das klappt, nur die box die ich mit dem generator http://mierendo.com/software/rounded_css_boxes/ gemacht habe, wird im IE 100% so breit wie die seite. hmmm......