| Autor |
Nachricht |
Certilion
Threadersteller
Dabei seit: 12.10.2006
Ort: Bad Salzdetfurth
Alter: -
Geschlecht: -
|
Verfasst Mo 29.01.2007 09:51
Titel größe von ineinander verschachtelten divs? |
  |
|
Hallo, auf der Seite www.se-cert.de (die ja einigen von Euch nun schon bekannt ist  ) findet ihr unter dem Punkt Referenzen Akkreditierung rechts in der Sidebar ein Bild.
Die Sidebar wurde im CSS mit 168 px Breite definiert. In der Sidebar gibt es noch zwei Divs, die in dem mit der Breite von 169 px enthalten sind. Der Außenabstand ist 12 px rechts und links. DAs Bild müsste demnach 144px sein, um zentriert zu sein. Ist es auch, aber es ist nicht genau zentriert oder guck ich nur falsch?
Unter Gebühren - Angebot hat das Bild eine Breite von 142 px und ist zentrierter als das mit 144 px finde ich.
Jemand hat mir gesagt, das man die divs, die innerhalb eines anderen divs liegen, nciht genau so breit machen darf wie das umgebende div. Ist das korrekt? (Kann man das mit Tabellen vergleichen, wo man immer den border mit einbeziehen muss?) Wie ist da der Richtwert, wenn es einen gibt? Bin über jede Hilfe dankbar. Dankeschön!
|
|
| |
  |
 |
tacker
Dabei seit: 22.03.2002
Ort: Trondheim, Norwegen
Alter: 43
Geschlecht: 
|
Verfasst Mo 29.01.2007 11:00
Titel Re: größe von ineinander verschachtelten divs? |
|
|
| Certilion hat geschrieben: | | Jemand hat mir gesagt, das man die divs, die innerhalb eines anderen divs liegen, nciht genau so breit machen darf wie das umgebende div. Ist das korrekt? |
Nein. Nackte DIVs haben keinen Rahmen, können also Elemente aufnehmen, die genauso breit sind, wie
sie selbst.
|
|
| |
 |
|
|
Anzeige
|
|
|
Certilion
Threadersteller
Dabei seit: 12.10.2006
Ort: Bad Salzdetfurth
Alter: -
Geschlecht: -
|
Verfasst Mo 29.01.2007 11:41
Titel
|
|
|
aha ok. Dankeschön!
Nochmal eine Verständnisfrage: Es stehen zwei divs nebeneinander. Das linke enthält ein Bild. Das rechte enthält Text. Der Text fängt aber nicht genau bündig mit dem Bild in dem linken div an. Ist das eine Standardeinstellung oder woran liegt das? Wenn ich den Text mit margin-top -3px "hochsetze" sieht es ok aus... 
|
|
| |
|
|
tacker
Dabei seit: 22.03.2002
Ort: Trondheim, Norwegen
Alter: 43
Geschlecht:
|
Verfasst Mo 29.01.2007 11:55
Titel
|
|
|
|
Prüfe mal die Margins / Paddings der beiden Divs und des Bildes.
|
|
| |
|
|
Certilion
Threadersteller
Dabei seit: 12.10.2006
Ort: Bad Salzdetfurth
Alter: -
Geschlecht: -
|
Verfasst Mo 29.01.2007 12:53
Titel
|
|
|
Daran liegts wohl nicht, ist alles auf Null (außer das margin-top -3). ??? Ich verstehs nicht...oder ich bin zu blöd 
| Code: |
.link_icon
{
width: 23px;
height: 23px;
float: left;
padding-bottom: 0px;/*Abstand nach unten wird über das div mit der klasse .link_text definiert*/
padding-right: 5px;
padding-left: 0px;
padding-top: 0px;
margin: 0px;
}
#sidebar_inhalt
{
width: 144px; /*vorher 135*/
height: 403px;
margin-top: 0px;
margin-left: 12px;
margin-bottom: 12px;
margin-right: 12px;
clear: left;
padding-top: 12px;
}
.standard_mittel { /*Eigenschaften des Textes*/
font-family:Verdana, Arial, Helvetica, sans-serif; /*Schriftart*/
font-size:10px; /*Schriftgr??e*/
color:#000000; /*Schriftfarbe*/
font-weight: normal; /*Schriftschnitt*/
text-align: left; /*Ausrichtung*/
line-height: 13px; /*Zeilenabstand (muss also gr??er als die Schriftgr??e sein, da Schriftgr??e+Durchschuss = Zeilenabstand)*/
margin-right: 0px; /*Abstand rechts*/
margin-left: 0px; /*Abstand links*/
margin-top: 0px;
margin-bottom: 0px;
}
.link_text
{
width: 116px;
float: left;
padding: 0px;
margin-top:-3px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
height: 33px;
}
|
| Code: |
<div id="sidebar_inhalt" class="standard_mittel">
<div class="link_icon"><a href="Download/Info/tabelle_lieferant.pdf"><img src="Images/Sidebar/icon_preisliste.gif" border="0" /></a></div>
<div class="link_text"><a href="Download/Info/tabelle_lieferant.pdf">Preisliste Lieferan-<br />ten Verfahren </a></div>
<div class="link_icon"><a href="Download/Info/tabelle_standard.pdf"><img src="Images/Sidebar/icon_preisliste.gif" border="0" /></a></div>
<div class="link_text"><a href="Download/Info/tabelle_standard.pdf">Preisliste Standard Verfahren</a></div>
<div class="link_icon"><a href="Download/Info/tabelle_vereinfacht.pdf"><img src="Images/Sidebar/icon_preisliste.gif" border="0" /></a></div>
<div class="link_text"><a href="Download/Info/tabelle_vereinfacht.pdf">Preisliste Verein-<br />fachtes Verfahren</a></div>
<div class="hinweis"><b>Hinweis:</b> Um <img src="Images/Sidebar/pdficon_16.gif" alt="" height="16" width="15" border="0" style="margin-bottom:-3px; margin-right:2px;"/>
PDF-­Da­teien lesen zu können, be­nö­tigen Sie den kosten­losen Adobe Acro­bat Rea­der, download: <a href="(http://www.adobe.com/de/products/acrobat/readstep2.html)">hier</a></div>
</div>
|
|
|
| |
|
|
Certilion
Threadersteller
Dabei seit: 12.10.2006
Ort: Bad Salzdetfurth
Alter: -
Geschlecht: -
|
Verfasst Di 30.01.2007 11:25
Titel
|
|
|
|
Kann mir bitte jemand helfen? *bettel*
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Di 30.01.2007 11:44
Titel
|
|
|
Das der Text nicht auf einer höhe mit dem Bild liegt, liegt wahrscheinlich an der Line-Height des Textes (du hast einen 10px text und 13 px line-height - dann hast du nach oben 3px "Luft"). Versuch dem Bild einfach: position: relative; top: 3px; als Angaben mitzugeben. Das sollte reichen.
Übrigens gibt es für margins und paddings eine Kurzschreibweise, die sehr sinnvoll ist:
| Code: | margin-top: 0px;
margin-left: 12px;
margin-bottom: 12px;
margin-right: 12px;
|
wird zu:
| Code: |
margin: 0px 12px 12px 12px;
|
(Die Angaben stehen von oben im Uhrzeigersinn - also top, right, bottom, left)
Zuletzt bearbeitet von sahnemuh am Di 30.01.2007 11:53, insgesamt 2-mal bearbeitet
|
|
| |
|
|
Certilion
Threadersteller
Dabei seit: 12.10.2006
Ort: Bad Salzdetfurth
Alter: -
Geschlecht: -
|
Verfasst Di 30.01.2007 12:05
Titel
|
|
|
Supi danke das hat geklappt.
Damit ich das jetzt richtig verstehe: Das top:3 px ist jetzt die Positionierung innerhalb des divs mit der id=sidebar_inhalt, weil sich das Bild an dem Elternelement ausrichtet, stimmt das so?
Dann wird die Höhe des divs wo das Bild drin ist doch 26 px hoch oder (height 23px und top 3px.)? Ich muss für meinen Chef eine "Konstruktionszeichnung" machen, wo ich alle margins und paddings und Breiten und Höhen angeben soll. Also ist dann von oben ein Abstand von 15px anstatt 12px sein richtig? Das will er aber nicht. (Soll überall 12 sein). Oder hab ich das jetzt falsch verstanden? (Weiß nicht, wie ich das in der Zeichnung mit der Positionierung klar machen soll...).
Eine Sache noch (will das mit dem Zeilenabstand und dem -3 so lassen, weil ichs besser verstehe, was man jetzt nimmt ist ja egal, oder): Das div von link_text ist ja 33 px hoch. margin-top = -3px, da ich damit ja den Text hochsetze. Die Gesamthöhe für die Divbox ist jetzt welche? 33 px oder 36 px oder 30px???
PS. Die Kurzschreibweise kenn ich, aber ich solls so machen.
lg
Zuletzt bearbeitet von Certilion am Di 30.01.2007 12:12, insgesamt 2-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Problem mit verschachtelten DIVs im IE.
[CSS] Hintergrund bei verschachtelten DIVs
background-color in verschachtelten div's
css höhe 100% in verschachtelten containern
[illu]ineinander kopieren
Erscheinungsbild vom verschachtelten DIV's je nach Browser
|
|
Willkommen auf dem Portal für Mediengestalter
