css: <img> und <div>

flyingeagle · 17.02.2005, 07:56

ich habe ein problem mit einem <img> und einem <div> container.

wenn ich zuerst das image anzeige, und darunter den div-container, dann habe ich dazwischen eine unschöne lücke, wie bekomme ich diese weg? mit den borders habe ich es schon versucht, das ging nicht. hat jemand ne idee?

kann ich mit css auch eine rahmenlinie mit farbverlauf machen?

danke

derHund · 17.02.2005, 08:48

Zitat:

wie bekomme ich diese weg?

margin?

Zitat:

kann ich mit css auch eine rahmenlinie mit farbverlauf machen?

per work-around über ein hintergrund-bild?

flyingeagle · 17.02.2005, 09:32

margin auf 0 px hab ich auch probiert aber das hat auch nix geholfen, werde es aber nochmal testen.

ja mit nem image kann ich das machen, wollte nur wissen obs vielleicht auch ohne geht, dann könnte ich mir ein image mehr spaaren.

17.02.2005, 14:08

also definnitiv hast du keinen abstand, wenn du es so machst:

Code:

[img]...[/img]
<div style="margin-top:0px;">
[...]
</div>

flyingeagle · 17.02.2005, 17:29

das hier ist mein html code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Seitentitel</title>
<link rel="stylesheet" type="text/css" href="standard.css">
</head>
<body>
  <div class="main">
    [img]logo.jpg[/img]

    <div class="menu">
      <div class="menuitem">
        das Team
      </div>
      <div class="menuitem">
        die Oase
      </div>
    </div>
    <div class="content">
    super
    </div>
  </div>
</body>
</html>

und das hier mein css

Code:

body
{
  text-align      : center;
  align           : center;
  background-color: #7e7e7e;
};

img.logo
{
  border-left  : 8px solid #ffffff;
  border-right : 8px solid #ffffff;
  border-top   : 8px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  margin-bottom: 0px;
};

div.main
{
  width: 598px;
  align: center;
};

div.menu
{
  float           : left;
  margin          : 0px;
  background-color: #ffffff;
  width           : 180px;
  border-left     : 8px solid #ffffff;
  text-align      : right;
  margin-top      : 0px;
};

div.menuitem
{
  background-color: #a4a4a4;
  text-align      : left;
  color           : #ffffff;
  padding-left    : 10px;
  margin          : 5px;
};

div.content
{
  background-color: #ffffff;//#cc44dd;
  text-align      : left;
  border-right    : 8px solid #ffffff;
  padding-left    : 10px;
  padding-right   : 10px;
  padding-top     : 10px;
  padding-bottom  : 10px;
  margin-top      : 0px;
};

und unter dem image sind immer ca 5 pixel abstand bis zum div

flyingeagle · 18.02.2005, 09:04

ich habe grade festgestellt, dass die luecke nur im ie auftritt, im mozilla sind keine probleme, wie bekomme ich die luecke im ie denn weg?

18.02.2005, 15:07

ja kein wunder, wenn du div.menuitem mit einem rand von 5px definiert hast!

weißt welche stelle ich meine oder?
in deinem inneren div mit der klasse menueitem hast du einen rand von 5px definiert, der zu dem äußeren div eingehalten wird.
dein beklagter abstand ist also nicht zwischen dem äußeren div und dem img sondern zwischen dem beiden verschachtelten divs.

flyingeagle · 18.02.2005, 15:35

Code:

div.menuitem
{
  background-color: #a4a4a4;
  text-align      : left;
  color           : #ffffff;
  padding-left    : 10px;
  margin          : 0px;             <<<<----- das hier meinst du doch oder?
};

wenn ich es so habe, also auf 0px dann bringt das genau so viel wie vorher auch :-/ der abstand geht nicht weg :-/

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
<div> Container über <select> Boxen legen	Zergling-new	HTML, Usability und Barrierefreiheit	14	19.01.2008 01:12
[CSS]vertical-align bei <div> anwenden	Matze	HTML, Usability und Barrierefreiheit	2	21.01.2007 18:39
Javascript, Anzeige eines <div> ändern	heohni	HTML, Usability und Barrierefreiheit	2	06.06.2006 14:11
vertikale Zentrierung eines <img> im <div>	Zergling-new	HTML, Usability und Barrierefreiheit	11	26.05.2006 20:35
<div> oder <table>		HTML, Usability und Barrierefreiheit	10	17.10.2005 17:32
<div> wächst nicht mit Bild...	stf.stream	HTML, Usability und Barrierefreiheit	4	01.06.2005 16:28
Zeilenumbruch in title="" (Attribut von <img>	yoshy	HTML, Usability und Barrierefreiheit	16	12.05.2005 16:34
[Erledigt] <div> layout funtzt nicht!!		HTML, Usability und Barrierefreiheit	7	20.04.2005 19:10
<img> und Internet Explorer	flyingeagle	HTML, Usability und Barrierefreiheit	5	21.02.2005 20:48
[Erledigt] CSS: <DIV> Positionieren		HTML, Usability und Barrierefreiheit	1	18.02.2005 21:05
<div> ohne break	andrew22	HTML, Usability und Barrierefreiheit	7	04.01.2005 12:27
vertiakle/horizontale Zentrierung im <div>		HTML, Usability und Barrierefreiheit	19	22.10.2004 22:20
css und <div>	JEGO	PHP Tipps 2004	10	22.10.2004 17:10
text-align:center wirkt nicht auf <div>		HTML, Usability und Barrierefreiheit	6	22.08.2004 15:11
[Erledigt] von Frames auf <div>, probleme mit den alten Scripten.		PHP Tipps 2004	6	01.06.2004 17:23

17.02.2005, 07:56
flyingeagle Benutzer Registriert seit: 03.06.2003 Beiträge: 89	css: <img> und <div> ich habe ein problem mit einem <img> und einem <div> container. wenn ich zuerst das image anzeige, und darunter den div-container, dann habe ich dazwischen eine unschöne lücke, wie bekomme ich diese weg? mit den borders habe ich es schon versucht, das ging nicht. hat jemand ne idee? kann ich mit css auch eine rahmenlinie mit farbverlauf machen? danke __________________ - Das Leben ist eine Spirale, man kotzt immer in der selben Kurve. - Frauen behalten nur für sich, was sie nicht wissen.


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

17.02.2005, 09:32
flyingeagle Benutzer Registriert seit: 03.06.2003 Beiträge: 89	margin auf 0 px hab ich auch probiert aber das hat auch nix geholfen, werde es aber nochmal testen. ja mit nem image kann ich das machen, wollte nur wissen obs vielleicht auch ohne geht, dann könnte ich mir ein image mehr spaaren. __________________ - Das Leben ist eine Spirale, man kotzt immer in der selben Kurve. - Frauen behalten nur für sich, was sie nicht wissen.

17.02.2005, 14:08
Gast Beiträge: n/a	also definnitiv hast du keinen abstand, wenn du es so machst: Code: [img]...[/img] <div style="margin-top:0px;"> [...] </div>

18.02.2005, 09:04
flyingeagle Benutzer Registriert seit: 03.06.2003 Beiträge: 89	ich habe grade festgestellt, dass die luecke nur im ie auftritt, im mozilla sind keine probleme, wie bekomme ich die luecke im ie denn weg? __________________ - Das Leben ist eine Spirale, man kotzt immer in der selben Kurve. - Frauen behalten nur für sich, was sie nicht wissen.

18.02.2005, 15:07
Gast Beiträge: n/a	ja kein wunder, wenn du div.menuitem mit einem rand von 5px definiert hast! weißt welche stelle ich meine oder? in deinem inneren div mit der klasse menueitem hast du einen rand von 5px definiert, der zu dem äußeren div eingehalten wird. dein beklagter abstand ist also nicht zwischen dem äußeren div und dem img sondern zwischen dem beiden verschachtelten divs.

18.02.2005, 15:35
flyingeagle Benutzer Registriert seit: 03.06.2003 Beiträge: 89	Code: div.menuitem { background-color: #a4a4a4; text-align : left; color : #ffffff; padding-left : 10px; margin : 0px; <<<<----- das hier meinst du doch oder? }; wenn ich es so habe, also auf 0px dann bringt das genau so viel wie vorher auch :-/ der abstand geht nicht weg :-/ __________________ - Das Leben ist eine Spirale, man kotzt immer in der selben Kurve. - Frauen behalten nur für sich, was sie nicht wissen.