Autor |
Nachricht |
magalan
Threadersteller
Dabei seit: 28.02.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 15.07.2013 16:50
Titel Problem mit div Container - höhe soll sich automatisch anpas |
|
|
Hallo,
Ich bin dabei mir ein Grundgerüst für eine Website aufzubauen.
Innerhalb meines wrappers (id=wrapper) habe ich einen div container (id=logo), welcher ein jpg enthält.
Ich hätte gerne, dass das jpg (logo) automatisch die Höhe des Containers anpasst. Ich habe also keine Angabe für die Höhe gemacht. Aber warum wird der Container höher als das Bild ?
Im Firefox sind es 4 pixel und im Chrome 3 pixel.
Kann mir Jemand sagen wo das Problem liegt ?
Hier der Link zur Seite:
http://www.pixelschubser.be/responsive/
und der Quellcode:
Code: |
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex, nofollow" />
<title>RWD</title>
<style type="text/css">
* {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
body {
background-color:#009999;
}
#wrapper {
width:800px;
margin-left:auto;
margin-right:auto;
background-color:#FFF;
}
#logo {
background-color:#CCC;
}
#navigation {
}
#content {
background-color:#CCC;
}
#footer {
}
</style>
</head>
<body>
<div id="wrapper">
<div id="logo"><img src="images/logo_250.jpg" alt="" width="250" height="100" /></div>
<div id="navigation">navigation</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
|
Zuletzt bearbeitet von magalan am Mo 15.07.2013 16:51, insgesamt 1-mal bearbeitet
|
|
|
|
|
top
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst Mo 15.07.2013 17:03
Titel
|
|
|
Dein Logo-Bild wird wie ein Schriftzeichen behandelt. Als Vorgabewert werden Bilder an der Grundlinie ausgerichtet. Der Abstand nach unten entsteht also durch den Raum welcher für Unterlängen wie z. B. beim Buchstaben "g" oder "j" benötigt wird.
Ergänze mal deine CSS-Angaben hier mit:
Code: | #logo img {
vertical-align: bottom;
} |
|
|
|
|
|
Anzeige
|
|
|
magalan
Threadersteller
Dabei seit: 28.02.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 15.07.2013 17:37
Titel
|
|
|
top hat geschrieben: | Dein Logo-Bild wird wie ein Schriftzeichen behandelt. Als Vorgabewert werden Bilder an der Grundlinie ausgerichtet. Der Abstand nach unten entsteht also durch den Raum welcher für Unterlängen wie z. B. beim Buchstaben "g" oder "j" benötigt wird.
Ergänze mal deine CSS-Angaben hier mit:
Code: | #logo img {
vertical-align: bottom;
} |
|
Ah danke jetzt geht es, nur wie kann ich wissen das Bilder wie text gehandhabt werden ?
Wo findet man solche Infos ?
|
|
|
|
|
Morgo
Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht:
|
Verfasst Mo 15.07.2013 18:11
Titel
|
|
|
Such mal nach „CSS Boxmodell” und dem Unterschied zwischen Block- und Inline-Elementen.
|
|
|
|
|
magalan
Threadersteller
Dabei seit: 28.02.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 15.07.2013 18:32
Titel
|
|
|
Morgo hat geschrieben: | Such mal nach „CSS Boxmodell” und dem Unterschied zwischen Block- und Inline-Elementen. |
Ah ok, ich hätte also, wie ich grade sehe, auch einfach das img in ein Block Element konvertieren können.
Code: |
#logo img {
display:block;
}
|
Danke euch für die schnelle Hilfe
Zuletzt bearbeitet von magalan am Mo 15.07.2013 18:33, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
CSS Problem. Div Container sollen sich automatisch anpassen.
css div container höhe?
[css] div-container Höhe
[CSS/HTML Probs] Container und 100% Höhe
3 Divs nebeneinander im Container auf einer Höhe?
Container Problem
|
|