Probleme mit Abständen zwischen div´s....

darvida · #1 (**permalink**) 09.07.2005, 15:13

Es geht um folgende Seite:
http://www.privateview.fotografische..._template.html

Das Problem sind die Abstände die ich zwischen den einzelnen div´s bekomme.
Woran liegt das?
Des weiteren wird der Text irgendwie nicht richtig angezeigt.
Nur die erste Zeile nimmt das margin an....?

CSS-Code:

Code:

html, body{
 margin:0;
 padding:0;
 text-align:center;
 background-color: #CCCDC9;
}

#pagewidth{
 width:810px;
 text-align:left;
 min-width: 500px;
 margin-left:auto;
 margin-right:auto;
 background-color: #CCCDC9;

}

#header{
 height:52px;
 width:810px;
 }

#imagefooter{
 height:10px;
 width:810px;
 }

#outer{
width: 810px;
 }

#footer{
 height:150px;
 width:810px;
 background-color:#6F365C;
}

#inner{
    width:810px;
    height: auto;
}

#maincol{
 float: left;
 width: 810px;
 height: auto;
 }

#main_image{
 background-image: url(/layout_images/hintergrund.gif);
 width: 810px;
 height: auto;
}

#image{
   border: 2px;
   border: solid;
   border-color: #000000;
   height: auto;
   width: auto;
 }

 #image_text{
 background-image: url(/layout_images/hintergrund.gif);
 width: 810px;
 height: auto;
}

 #comment{
 width: 810px;
 height: auto;
}

 #comment_header{
 width: 810px;
 height: auto;
}

 #comment_text{
 background-image: url(/layout_images/comment_hintergrund.gif);
 width: 810px;
 height: auto;
}

 #comment_footer{
 width: 810px;
 height: auto;
}

 #menu{
    height: 20px;
    text-align: center;
    background-image: url(/layout_images/hintergrund.gif);
 }

 #menu_left{
   height: 20px;
   width: 20px;
   float: left;
 }

 #menu_middle{
   height: 20px;
   width: 770px;
   float: left;
   border-bottom: 1px;
   border-bottom-color: #7B8363;
   border-bottom-style: solid;
   border-top: 1px;
   border-top-color: #7B8363;
   border-top-style: solid;
 }

 #menu_right{
   height: 20px;
   width: 20px;
   float: left;
 }

 #exif{
   text-align: center;
   height: 15px;
 }

 #image_footer{
   height: 12px;
   width: 810px;
 }

#text_header{
   height: 12px;
   width: 810px;
}


 .menu{
   font-family: Century Gothic, Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #7B8363;
   text-align: center;
   text-decoration: none;
 }

 .menu:link{
   font-family: Century Gothic, Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #7B8363;
   text-align: center;
   text-decoration: none;
 }

 .menu:hover{
    font-family: Century Gothic, Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #545B41;
   	text-align: center;
	text-decoration: none;
 }

 .exif{
  font-family: Century Gothic, Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #7B8363;
   text-align: center;
   text-decoration: none;
 }

.image_text{
    margin-left: 10px;
    font-family: Century Gothic, Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #7B8363;
    text-decoration: none;
 }

.clr{clear:both;}

.content{height: 5px;} /*padding for content */
.content1{height: 5px; background-color: #CCCDC9;}
.content2{height: 5px; background-image: url(/layout_images/hintergrund.gif);}
.content3{height: 5px; background-color: #CCCDC9;}

#header .content{padding-bottom:0;} /*padding bottom 0 to remove space in IE5 Mac*/

html-code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Private View</title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />


			<script language='javascript' src='http://127.0.0.1:2524/js.cgi?pca&r=10712'></script>

</head>
<body>
<div id="pagewidth" >
	<div id="outer" >
        <div class="content1"></div>
 		    <div id="inner">
               <div id="header">  
 		          <div>[img]layout_images/headerimage.gif[/img]</div>
               </div>
        <div id="menu">
            <div id="menu_left">[img]layout_images/menu_left.gif[/img]</div>
            <div id="menu_middle">archiv
            archiv
            archiv
            archiv</div>
            <div id="menu_right">[img]layout_images/menu_right.gif[/img]
        </div>
        <div class="content2"></div>
 		<div id="maincol">
            <center>
            <div id="main_image">
            <div class="content2"></div>
                <div>[img]images/testbild.jpg[/img]</div>
                <div id="exif"><a class="exif">Schattenbild   7. Juni 2005    01:24</a></div>
                <div class="content2"></div>
            </div>
            </center>
				
            <div id="image_footer">[img]layout_images/picture_footer.gif[/img]</div>
            <div id="text_header">[img]layout_images/text_header.gif[/img]</div>
            <div id="image_text"><a class="image_text">text text text text text text text text

                            text text text text text text text text

                            text text text text text text text text

                            text text text text text text text text

                            text text text text text text text text

                            text text text text text text text text
</a></div>
            <div id="image_footer">[img]layout_images/picture_footer.gif[/img]</div>
            <div id="comment">
                <div id="comment_header">[img]layout_images/comment_header.gif[/img]</div>
                <div id="comment_text"><a class="image_text">text text text text text text text text

                            text text text text text text text text

                            text text text text text text text text

                            text text text text text text text text

                            text text text text text text text text

                            text text text text text text text text
</a></div>
                <div id="comment_footer">[img]layout_images/comment_footer.gif[/img]</div>

            </div>
		</div>

 			<div class="clr"></div>
		
		</div>
	</div>
	<div class="clr"></div>
</div>
</body>
</html>

Vielen Dank üfr Eure Hilfe,
lg
Christina

Gumbo · #2 (**permalink**) 09.07.2005, 15:33

Weise den Grafiken mal mittels „display:block“ Block-Element-Eigenschaften zu.

PS: Probleme mit Akzent Akut zwischen „div“ und „s“.

darvida · #3 (**permalink**) 09.07.2005, 16:08

Danke, jetzt funktioniert´s!

Zitat:

PS: Probleme mit Akzent Akut zwischen „div“ und „s“.

????
Versteh ich nicht ganz...
lg
Christina

darvida · #4 (**permalink**) 09.07.2005, 16:45

Des weiteren bleibt das Problem, das bei dem Text nur die erste Zeile mit dem margin:10px hineingerückt wird und der rest nicht....
lg
Christina

Gumbo · #5 (**permalink**) 09.07.2005, 18:48

Im Deutschen wird das Plural-S nicht vom Wort getrennt. Denn das Apostroph (was es in deinem Fall nicht einmal war) gilt im Deutschen als Auslassungszeichen. Also könnte „funktioniert's“ beispielsweise für „funktioniert es“ stehen. Siehe dazu auch deppenapostroph.de und „Rettet den Apostroph!“.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Probleme mit border div zwischen containern	Paykoman	CSS	1	01.07.2012 17:21
Mannigfaltige Probleme mit einer gepunkteten Linie zwischen Absätzen!	landau66	CSS	1	10.06.2009 17:12
Probleme mit Abständen und float	Lili0312	CSS	5	03.09.2006 01:35
(Newbie): Probleme mit Abständen - IE6 + Firefox	NullDevice	CSS	6	15.07.2006 20:22
Probleme mit der Darstellung zwischen IE und Firefox	Insane.J	CSS	1	08.11.2005 12:47