...

View Full Version : problem with this box



OGGordon
12-23-2010, 11:22 PM
Hey guys,

so I am planning to make this:

http://www.codingforums.com/attachment.php?attachmentid=9216&stc=1&d=1293146401

This is the file:


<div id="topstorycont">

<div id="topstory">
<div id="number">
1
</div>

<div id="previmage">
<a href="http://www.blablabla.de/2010/12/nur-noch-3-tage-kostenloses-girokonto-bei-netbank-mit-60-eurp-pramie-bekommen/" target="_blank"><img src="http://www.blablabla.de/wp-content/themes/blocks/images/preview/previmage1.PNG" alt="" </></a>
</div>
<div id="prevlink">
<a href="http://www.blablabla.de/2010/12/nur-noch-3-tage-kostenloses-girokonto-bei-netbank-mit-60-eurp-pramie-bekommen/" target="_blank">Gratis Netbank Girokonto + 60 Euro</a>
</div>
</div>

</div>


The CSS Data:


#topstorycont {
width: 304px;
border-top: 1px solid #DDDDDD;
border-bottom: 1px solid #FFFFFF;
margin-top:10px;
}

#topstory {
width: 304px;
}

#number {
width:54px;
height:52px;
background-color:#DDDDDD;
font-size:30px;
font:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#FFFFFF;
}

#previmage {
float: left;
width:92px;
height:52px;

}

#prevlink {
float:left;
width:100px;
height:52px;
padding-left:10px;
}

Somehow it does not appear the way I want it. This is how it looks:

http://www.codingforums.com/attachment.php?attachmentid=9217&stc=1&d=1293146562

Help needed!

teedoff
12-23-2010, 11:58 PM
Did you try left margins on the previewImage and previewLinks to bump them to the right?

When you float an element left, the next element must also have a left margin at least the width of the element to the left of it.

OGGordon
12-24-2010, 12:13 AM
Did you try left margins on the previewImage and previewLinks to bump them to the right?

When you float an element left, the next element must also have a left margin at least the width of the element to the left of it.

thanks for the tip, totally forgot. however, it just moved the image and the link to the right, still under the box "1".

OGGordon
12-24-2010, 01:27 AM
Ah got now, one more question, can you tell me how to get the number in the center and change the font?

Excavator
12-24-2010, 01:31 AM
Hello OGGordon,
image and link are under "1" because you don't float it. You have 3 items that you want side by side but only float 2 of them.

Look at this -
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#topstorycont {
width: 304px;
border-top: 1px solid #DDDDDD;
border-bottom: 1px solid #FFFFFF;
margin-top: 10px;
}
#topstory {
width: 304px;
}
#number {
height: 52px;
width: 54px;
float: left;
background: #ddd;
font: bold 20px Arial, Helvetica, sans-serif;
color: #fff;
}
#previmage {
height: 52px;
width: 92px;
float: left;

}
#prevlink {
height: 52px;
width: 100px;
float: left;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="topstorycont">
<div id="topstory">
<div id="number">
1
</div>
<div id="previmage">
<a href="http://www.blablabla.de/2010/12/nur-noch-3-tage-kostenloses-girokonto-bei-netbank-mit-60-eurp-pramie-bekommen/">
<img src="http://www.blablabla.de/wp-content/themes/blocks/images/preview/previmage1.PNG" alt="" />
</a>
</div>
<div id="prevlink">
<a href="http://www.blablabla.de/2010/12/nur-noch-3-tage-kostenloses-girokonto-bei-netbank-mit-60-eurp-pramie-bekommen/">
Gratis Netbank Girokonto + 60 Euro
</a>
</div>
<!--end topstory--></div>
<!--end topstorycont--></div>
</body>
</html>

Excavator
12-24-2010, 02:04 AM
Or even this with a little less divitis -
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #f63;
font: 100% Arial, Helvetica, sans-serif;
color: #333;
}
#topstorycont {
width: 304px;
margin: 10px auto;
padding: 5px 0 20px;
background: #fff;
}
#topstory {
border-top: 1px solid #ddd;
}
#number {
line-height: 50px;
width: 50px;
margin: 0;
float: left;
background: #ddd;
color: #fff;
font-size: 1.5em;
text-align: center;
}
#previmage {
height: 50px;
width: 95px;
float: left;
}
#prevlink {
margin: 5px 0 0 155px;
display: block;
font-size: 14px;
}
</style>
</head>
<body>
<div id="topstorycont">
<div id="topstory">
<h1 id="number">1</h1>
<a href="http://www.blablabla.de/2010/12/nur-noch-3-tage-kostenloses-girokonto-bei-netbank-mit-60-eurp-pramie-bekommen/" id="previmage">
<img src="http://www.blablabla.de/wp-content/themes/blocks/images/preview/previmage1.PNG" alt="" />
</a>
<a href="http://www.blablabla.de/2010/12/nur-noch-3-tage-kostenloses-girokonto-bei-netbank-mit-60-eurp-pramie-bekommen/" id="prevlink">
Gratis Netbank Girokonto + 60 Euro
</a>
<!--end topstory--></div>
<!--end topstorycont--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum