Have something to say? Contribute New Article Reply to this Article
Elements beside each other
I have this website, which is still under development, and I am wondering why, when I go to Termékek it displays them all under each other, when in firefox, and opera it doesn't.
here is the css
*{
margin: 0;
padding: 0;
}
*{
text-decoration: none;
}
.wrapper {
width: 800px;
height: auto;
border: 1px solid;
margin: 10px auto 0 auto;
}
.header {
width: 800px;
height: 150px;
background-image:url('Images/header.png');
background-repeat: no-repeat;
}
.navbar {
width: 800px;
height: 25px;
background-image:url('Images/button.png');
background-repeat: repeat-x;
}
.button a {
float: left;
width: 200px;
height: 25px;
line-height: 20px;
font-family: Arial;
font-size: 13px;
color: #000;
font-weight: bold;
text-align: center;
}
.button a:hover {
float: left;
width: 200px;
height: 25px;
line-height: 20px;
font-family: Arial;
font-size: 13px;
color: #fff;
font-weight: bold;
text-align: center;
background-image:url('Images/button_down.png');
background-repeat: repeat-x;
}
.body {
width: 800px;
height: auto;
font-family: Arial;
font-size: 11px;
color: #000;
background: url('Images/backgTrans.png');
}
div.textbody {
padding: 10px;
color: #000000;
font-weight: bold;
}
div.textbody h1 {
float: left;
}
div.textbody p{
font-size: 15px;
font-weight:bold;
color:#000000;
}
div.textbody img{
padding: 5px;
}
.leftDiv{
position: relative;
margin-right: 10px;
display: inline;
}
.productsDiv {
display: inline-block;
padding: 20px;
font-size: 14px;
}
.important h1{
}
Also another quick question when I view it in firefox all of the elements are at the same height (the top of the pictures are in line), but when I view it in opera one of them is one
higher. Is there a way to fix this?
Thanks for any help.
sirlink99
Practically a Master Poster
661 posts since Oct 2010
Reputation Points: 45
Solved Threads: 19
Thanks that fixed the first error, but now how come one item in opera is a
higher then the other ones?
sirlink99
Practically a Master Poster
661 posts since Oct 2010
Reputation Points: 45
Solved Threads: 19
please enclose your html code for usage. As in my personal experience, opera does read the line break of coding. try joining the coding of div so that there is no space between 2 div:
here is the HTML
<!DOCTYPE html>
<head>
<title>Website Name</title>
<meta http-equiv="Content-Type" content="text/html; charSet=UTF-8">
<link rel="stylesheet" href="styles.css" media="screen" />
</head>
<body>
<div class="wrapper">
<center>
<div class="header">
</div>
<div class="navbar">
<div class="button"><a href="index.php">Főoldal</a></div>
<div class="button"><a href="products.php">Termékek</a></div>
<div class="button"><a href="about.php">Rólunk</a></div>
<div class="button"><a href="contact.php">Elérhetőség</a></div>
</div>
<div class="body">
<h1>Termékek</h1>
<div class="productsDiv">
<div>
<a href="fa.php">
<img src="Images/fa.jpg" width="125px" height="125px"/>
<p>Faáruk</p>
</a>
</div>
</div>
<div class="productsDiv">
<a href="villany.php">
<img src="Images/skapocs.jpg" width="125px" height="125px"/>
<p>Villanyszerelési anyagok </p>
</a>
</div>
<div class="productsDiv">
<div>
<a href="karnis.php">
<img src="Images/karnis.jpg" width="125px" height="125px"/>
<p>karnisok
ezer aprócikk </p>
</a>
</div>
</div>
<div class="productsDiv">
<div>
<a href="zár.php">
<img src="Images/lock.jpg" width="125px" height="125px"/>
<p>Zárak, Lakatok</p>
</a>
</div>
</div>
<div class="productsDiv">
<div>
<a href="lanc.php">
<img src="Images/chain.jpg" width="125px" height="125px"/>
<p>Láncok, Kötelek, Drótkötelek</p>
</a>
</div>
</div>
<div class="productsDiv">
<div>
<a href="rogzites.php">
<img src="Images/screw.jpg" width="125px" height="125px"/>
<p>Rögzités teknika, Kötő ellemek</p>
</a>
</div>
</div>
<div class="productsDiv">
<div>
<a href="furo.php">
<img src="Images/furo.jpg" width="125px" height="125px"/>
<p>Fúrók, Vágókorongok</p>
</a>
</div>
</div>
<div class="productsDiv">
<div>
<a href="csiszolo.php">
<img src="Images/csiszol.jpg" width="125px" height="125px"/>
<p>Csiszolo anyagok, Festő szerszámok, Fóliák ragasztószallagok</p>
</a>
</div>
</div>
<div class="productsDiv">
<div>
<a href="kezi.php">
<img src="Images/fogo.jpg" width="125px" height="125px"/>
<p>Kéziszerszamok, Electromos gépek </p>
</a>
</div>
</div>
<div class="productsDiv">
<div>
<a href="ragaszto.php">
<img src="Images/szilikon.jpg" width="125px" height="125px"/>
<p>Ragasztók, szilikonok, purhabok, vegyiáruk</p>
</a>
</div>
</div>
<div class="productsDiv">
<div>
<a href="kerekek.php">
<img src="Images/kerek.jpg" width="125px" height="125px"/>
<p>Kerekek, görgők, Fogasok, Butorvasalások</p>
</a>
</div>
</div>
<div class="productsDiv">
<div>
<a href="kerti.php">
<img src="Images/gereblye.jpg" width="125px" height="125px"/>
<p>Kerti szerszámok</p>
</a>
</div>
</div>
<div class="productsDiv">
<div>
<a href="vedelem.php">
<img src="Images/vedo.jpg" width="125px" height="125px"/>
<p>Munkavédelem</p>
</a>
</div>
</div>
</div>
</center>
</div>
</body>
</html>
and changing the divs did not make a difference.
sirlink99
Practically a Master Poster
661 posts since Oct 2010
Reputation Points: 45
Solved Threads: 19
please remove the line break between divs. For example:
<div class="productsDiv">
<div>
<a href="kerti.php">
<img src="Images/gereblye.jpg" width="125px" height="125px"/>
<p>Kerti szerszámok</p>
</a>
</div>
</div><div class="productsDiv">
<div>
<a href="vedelem.php">
<img src="Images/vedo.jpg" width="125px" height="125px"/>
<p>Munkavédelem</p>
</a>
</div>
</div>Please try if this work
nvm I found it. I was missing a set of divs in the productsDiv
this
<div class="productsDiv">
<a href="villany.php">
<img src="Images/skapocs.jpg" width="125px" height="125px"/>
<p>Villanyszerelési anyagok </p>
</a>
</div>
should have been this
<div class="productsDiv">
<div>
<a href="villany.php">
<img src="Images/skapocs.jpg" width="125px" height="125px"/>
<p>Villanyszerelési anyagok </p>
</a>
</div>
</div>
Thanks for your help
sirlink99
Practically a Master Poster
661 posts since Oct 2010
Reputation Points: 45
Solved Threads: 19
This question has already been solved
You
© 2012 DaniWeb® LLC
