CSS-Boxmodel - unterschiedliche Ansichten

y.tong · #1 (**permalink**) 29.03.2009, 22:22

Hallo,

in einer Website sollen in der Mitte drei Bilder dargestellt werden. Ein großes und zwei kleinere. (Siehe .jpg-Anlage.)
Alle drei Bilder sollen mit einem Link hinterlegt sein.

Die erste Herausforderung war der Hover-Effekt für die Links bei den Bilder zu deaktieren. (css code: a.navi:hover). Nachdem ich das geschafft hatte kam ich zum eigentlichen Problem:

Der graue Rahmen um die gesamten Bilder (css code: #bild) wird im IE6,7,8 korrekt angezeigt. Im Firefox fehlt der rechte und untere Rand. Außerdem sind die Abstände zwischen den Bilder nicht gleichmäßig. Ich werd noch zum Hirsch....

Noch eine kleine Hintergrundinformation: Ich hab noch nie was mit HTML und CSS gemacht. Hab mir lediglich die Anleitungen und Beispiele bei css4you durchgelesen.

Freue mich auf konstruktive Kritik...

bye,
bas

HTML Code:

Code:

<body>
<div id="layout">
  		<div id="header">
  			<div id="logo"><img src="images/logo.gif" /></div>
  			<div id="menu"><menutext><a href="index.php?id=menu1">menu1</a></menutext>
  			</div>
   		 	<div id="menu"><menutext><a href="index.php?id=menu2">menu2</a></menutext>
  		  	</div>
  		  	<div id="menu"><menutext><a href="index.php?id=menu3">menu3</a></menutext>
  		  	</div>
   			<div id="menu"><menutext><a href="index.php?id=menu4">menu4</a></menutext>
  		 	</div>
  		</div>
       
  		<div id="bild">
        	<div id="links"><a class="navi" href="images/original/IMG_4001.jpg" ><img src="images/thumbs/left_.jpg" width="399" height="301" /></a></div>
          <div id="rechts"><a class="navi" href="images/original/IMG_4005.jpg"><img src="images//thumbs/rigth_top_.jpg" width="310" /></a></div>
          <div id="rechtsunten"><a class="navi" href="images/original/IMG_4006.jpg"><img src="images//thumbs/rigth_down_.jpg" width="310" /></a></div>
  </div>
  
    	<div id="rundgang">
        <div id="menu2"><menutext><a href="index.php?typ=menu5">Menu 5</a></menutext></div>
        <div id="menu2"><menutext><a href="index.php?typ=menu6">menu 6</a></menutext></div>
        <div id="menu2"><menutext><a href="index.php?typ=menu7">menu 7</a></menutext></div>
        <div id="menu2"><menutext><a href="index.php?typ=menu8">menu 8</a></menutext></div>
        <div id="menu2"><menutext><a href="index.php?typ=menu9">menu 9</a></menutext></div>
        <div id="menu2"><menutext><a href="index.php?typ=menu0">menu 0</a></menutext></div>
        <div id="menu2"><menutext><a href="index.php?typ=menu9">menu 00</a></menutext></div>
        </div> 
			
	<div id="inhalt">
        Lorem ipsum alia autem labore per et, duis essent officiis eu ius. Et persecuti ullamcorper sit, nam cu liber deleniti omittantur, exerci epicuri 
</div>
</div>

CSS Code:

Code:

* {
	margin: 0px 0px 0px 0px;
	border: 0px 0px 0px 0px;
}

body {
background:#ffffff;
margin-top:0px;
font-family: Verdana;
font-size: 11px;
}

a:link, a:visited, a:active, a:hover
{ 
text-decoration:none;
color:#FFFFFF;
}

a:active, a:hover{ 
color:#333333;
text-decoration:underline;
}
a.navi:link
{
text-decoration:none;
color:#ffffff;
}
a.navi:visited
{
text-decoration:none;
color:#ffffff;
}
a.navi:hover
{
text-decoration:none;
color:#ffffff;
}
 a.navi:active
{
text-decoration:none;
color:#ffffff;
}
 

 
#layout { 
width:716px;
position:absolute;
margin-left:-385px;
margin-top:15px;
left:50%;
}

#header {
height:39px;
}

#logo {
margin-left:5px;
width:170px;
height:40px;
float:left;
}

#menu {
font-size:12px;
width:110px;
height:21px;
background-color:#a0c84b;
border:1px solid #658116;
float:right;
margin-left:10px;
margin-top:15px;
font-weight:400;
line-height:21px;
text-align:center;
}

#bild {
border:1px solid #999999;
height:300px;
margin-top:30px;
}

#links {
width:400px;
float:left;
}

#rechts {
margin-top:0px;
width:310px;
height:148px;
float:right;
}


#rechtsunten {
width:310px;
height:148px;
margin-top:4px;
float:right;
}

#rundgang {
margin-top:15px;
height:21px;
text-align:center;
}

#menu2 {
font-size:12px;
width:93px;
height:21px;
background-color:#6699ff;
border:1px solid #2e59b1;
float:left;
margin-right:3px;
margin-left:3px;
font-weight:400;
line-height:21px;
text-align:center;
}

#inhalt {
background-color:#f5f5f5;
width:686px;
margin:15px;
margin-left:0px;
padding:15px;
border:1px solid #cccccc;
}

plastiko · #2 (**permalink**) 30.03.2009, 01:02

Das reicht nicht:

Code:

* {
...
border: 0px 0px 0px 0px;
}

Schalte die Border für img ganz aus:

Code:

img {
 border: none;
}

oder:

Code:

a img {
border: none;
}

y.tong · #3 (**permalink**) 30.03.2009, 07:41

so einfach geht's.....
Und ich such mir tagelang den wolf.

@plastiko: danke.

bas

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
2 CSS Files -> 1 CSS File	Habi	CSS	7	17.02.2010 15:25
Verschachteln und Erweitern von CSS?	DerJo	CSS	4	25.01.2010 18:07
MYspace mehr als nur CSS oder ?	Vinceone	CSS	0	12.07.2007 02:21
Eric Meyer's CSS	Petty	Ressourcen	0	21.11.2005 08:18
Mozilla ignoriert externes css	DarkWanderer	CSS	9	22.09.2005 11:39