...

View Full Version : Help with div elements?



stfc_boy
07-11-2008, 04:43 PM
Hello

I'm trying to create a div element here:

http://www.inspireaway.co.uk/question/rep.htm

But I've wracked my brain and can't get it to work. Can anyone help me get it like my graphical element i've created on the page?

Thanks

BWiz
07-11-2008, 05:24 PM
<html>
<head>
<title>divElement.html</title>
<style type="text/css">
* {
margin: 0;
padding: 0
}

#fleetTown-bar {
border: 1px solid #ccc;
height: 60px;
width: 620px;
}

#fleetTown-bar #logo {
float: left;
width: 60px;
height: 60px;
text-indent: -9999px;
background-image: url();
background-repeat: no-repeat;
}

#fleetTown-bar #middle {
background-color: #fff;
float: left;
width: 500px;
}

#fleetTown-bar #middle #top {
background-color: #006;
color: #fff;
}

#fleetTown-bar #middle #top h3 {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
text-transform: uppercase;
padding: 3px;
}

#fleetTown-bar #middle #bottom p {
padding: 5px 5px 5px 0;
}

#fleetTown-Bar #number {
background-color: #ddd;
float: left;
padding: 10px;
height: 40px;
width: 40px;
text-align: center;
font-size: 35px;
color: #000;
}
</style>
</head>
<body>
<div id="fleetTown-bar">
<div id="logo">
<span>Fleet Town Insignia</span>
</div>
<div id="middle">
<div id="top">
<h3>Fleet Town</h3>
</div>
<div id="bottom">
<p>Name here.</p>
</div>
</div>
<div id="number">
<span>1</span>
</div>
</div>
</body>
</html>
Remember to change the background picture. You may need to alter the height and width a little, then you'll have to change the dimensions of most of the child elements. I assumed the logo was 60px by 60px. Tested it in FF3, looks exactly like what you are looking for.

jcdevelopment
07-11-2008, 05:31 PM
CSS


* { padding:0; margin: 0; }


body {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
background: #FFF;
color: #666;
}

#rep_holder {
float:left;
width:653px;
border:1px solid #999;
background: #FFFFFF;
}

h2 {
float:left;

width:545px;
color:#FFFFFF;
background:#17186B;
font-size:0.90em;
margin-bottom:2px;
height:20px;
text-transform:uppercase;
line-height:20px;
text-indent:4px;
}

.score {

float:left;

width:50px;
height:50px;
margin-left:0px;
background: #EEEEEE;
font-size: 40px;
color:#333;
text-indent:12px;
}

p {
float:left;
}

.middle {
float:left;
width:543px;
text-align:left;
}

HTML


<div id="rep_holder">
<img src="img.jpg" style="float: left; display: inline; margin-right:10px;">
<div class="middle">
<h2>Fleet Town</h2>



<p>Name here, name here, name here</p>
</div>
<div class="score">1</div>
</div>

<div style="clear: left;"></div>
<br>
<p><strong>Ideally want it like this...</strong></p>
<br>
<img src="fleet.jpg">

**EDIT: oops too slow!!!

abduraooft
07-11-2008, 05:38 PM
h2 {
background:#17186B none repeat scroll 0&#37;;
color:#FFFFFF;
font-size:0.9em;
height:20px;
line-height:20px;
margin-bottom:2px;
text-indent:4px;
text-transform:uppercase;
/*display:inline;
float:left;
width:100%;*/
}
.score {
background:#EEEEEE none repeat scroll 0%;
color:#333333;
display:inline;
float:right;
font-size:40px;
height:50px;
margin-left:4px;
text-align:left;
text-indent:12px;
width:50px;




<div id="rep_holder">
<img src="img.jpg" style="float: left; display: inline;">
<div class="score">1</div>
<h2>Fleet Town</h2>


<p>Name here, name here, name here</p>

</div>

<div style="clear: left;"></div>
<br>
<p><strong>Ideally want it like this...</strong></p>
<br>
<img src="fleet.jpg">
All the floated elements should be placed before all non floated elements.

stfc_boy
07-11-2008, 06:10 PM
Thanks all

theashman
07-11-2008, 09:40 PM
or you can have a container div
and use a 3 column fluid layout?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum