CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

problems displaying divs inline or as a block

Discuss problems displaying divs inline or as a block in the CSS Help forum on Dev Shed.
problems displaying divs inline or as a block Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old June 7th, 2004, 11:27 AM
alexh alexh is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 35 alexh User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
problems displaying divs inline or as a block
I have been trying in vain to get div elements on a page to behave how i want them to. I have a list of items, in the middle of which i need to display some tablular information witha picture along side it. This i have managed to acieve fine, but i can't get the next <li> to start below these 2, it starts alongside and the wraps underneath. I have tried everything. Can anyone help?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#wrapper{
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-left: 20px;
width: 550px;
font-size: 12px;
line-height: 22px;
letter-spacing: 0.5px;
color: #666666;
}
#topimg {
margin: 20px 0;
padding-bottom: 20px;
border-bottom: 1px dotted #CCCCCC;
text-align:left;
display:block;
}
#secondimg {
margin: 0 0 0 20px;
text-align:left;
display:block;
}
#bodyimg{
padding: 20px 0px 20px 20px;
float:left;
display:block;
}

#listtable{
padding-top: 20px;
padding-bottom: 20px;
float:left;

font-size: 10px;
letter-spacing: 0.5px;
color: #891C46;
list-style-type: none;
line-height:18px;
}
#listtable li{
margin: 1px;
padding: 1px;
}

#listtable div {
margin: 1px;
padding: 1px;
background-color: #F7F7F7;
}
-->
</style>
<title>Carlton</title>
</head>

<body>



<div id="wrapper">

<div id="topimg">
<img src="/carlton-newsite/img/planandbuy/planandbuy.gif" width="173" height="33">
</div>

<div id="secondimg">
<img src="/carlton-newsite/img/planandbuy/thebasics.gif" width="133" height="23">
</div>

<ul>
<li>Cinema Advertising is available in weekly blocks starting on Fridays.</li>
<li>It is possible to buy <em> guaranteed admissions</em> by TV region, <em> follow specific films</em> or <em> nominate individual screens</em>. </li>
<li>The minimum time unit available is 5 seconds. Prices differ based on commercial length with indeces using 30&rdquo; as a base: </li>


<div id="listtable">
<table width="200" border="0" cellspacing="0" cellpadding="0" class="nobullet">
<tr>
<td width="105">
<li>
<div>5&rdquo;</div>
</li>
<li>10&rdquo;</li>
<li>
<div>20&rdquo;</div>
</li>
<li>30&rdquo;</li>
<li>
<div>40&rdquo;</div>
</li>
<li>45&rdquo;</li>
<li>
<div>50&rdquo;</div>
</li>
<li>60&rdquo;</li>
<li>
<div>90&rdquo;</div>
</li>
</td>
<td width="95">
<li>
<div>.3&rdquo;</div>
</li>
<li>.5&rdquo;</li>
<li>
<div>.8&rdquo;</div>
</li>
<li>.1.00&rdquo;</li>
<li>
<div>.1.33&rdquo;</div>
</li>
<li>.1.50&rdquo;</li>
<li>
<div>.1.67&rdquo;</div>
</li>
<li>.2.00&rdquo;</li>
<li>
<div>.3.00&rdquo;</div>
</li>
</td>
</tr>
</table>
</div>

<div id="bodyimg">
<img src="/carlton-newsite/img/digital_adver/satelite.jpg" width="220" height="182">
</div>


<li>Cinema commercials are shown on 35mm film, it is easy to get your TV ad transferred by our production department. </li>
<li>Lead times from booking to getting on screen are 3 weeks, although CSA&rsquo;s <em> Early Booking Incentive</em> guarantees extra value if you can book your campaign 6 weeks in advance of start date. </li>
<li>Cinema Advertising Association <em> cinema buying guidelines</em> ensure your campaign meets industry agreed standards. </li>

</ul>
</div>

</body>
</html>
Reply With Quote
  #2  
Old June 7th, 2004, 02:20 PM
stinkoman's Avatar
stinkoman stinkoman is offline
what's your moniker?
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2003
Location: Highland Park, NJ
Posts: 201 stinkoman User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 6
Send a message via AIM to stinkoman
add the line li {clear:both} to your css. when you float an element, content will flow around it till you clear the float.

-Greg
__________________
new jersey web design
Reply With Quote
  #3  
Old June 8th, 2004, 06:19 AM
alexh alexh is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 35 alexh User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
Thanks for your reply. I tried your suggestion but it didn't work. I tried appying it to several elements without success.

I did manage to fix the problem, unfortunately i had to go back to using tables, placing the tablular data and image in a table.

Can you explain display to me. I thought that display:block forced the element to have a newline after it. However that doesn't seem to be a constant rule.
Reply With Quote
  #4  
Old June 8th, 2004, 09:05 AM
stinkoman's Avatar
stinkoman stinkoman is offline
what's your moniker?
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2003
Location: Highland Park, NJ
Posts: 201 stinkoman User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 6
Send a message via AIM to stinkoman
Quote:
Originally Posted by alexh
Thanks for your reply. I tried your suggestion but it didn't work. I tried appying it to several elements without success.

I did manage to fix the problem, unfortunately i had to go back to using tables, placing the tablular data and image in a table.

Can you explain display to me. I thought that display:block forced the element to have a newline after it. However that doesn't seem to be a constant rule.


really? what did it look like, and what do you want it to look like? when I add the clear I get what you see in the attachment. what browser are you looking in?

display:block forces elements with no dimensions to display in, well, a block. also it makes elements like links clickable in the surrounding whitespace.

-Greg
Attached Images
File Type: gif example.gif (16.1 KB, 87 views)
Reply With Quote
  #5  
Old June 8th, 2004, 10:44 AM
alexh alexh is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 35 alexh User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
My apologies, I applied the clear:both not to a generic li tag but to the listtable li tag, which obviously did not work. Thanks for that, I will remove the tables and put it back as CSS.

display:block. If i specify a width or height, does it mean it will affect the newline property of the block statement?
Reply With Quote
  #6  
Old June 8th, 2004, 11:17 AM
stinkoman's Avatar
stinkoman stinkoman is offline
what's your moniker?
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2003
Location: Highland Park, NJ
Posts: 201 stinkoman User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 6
Send a message via AIM to stinkoman
Quote:
Originally Posted by alexh
My apologies, I applied the clear:both not to a generic li tag but to the listtable li tag, which obviously did not work. Thanks for that, I will remove the tables and put it back as CSS.

display:block. If i specify a width or height, does it mean it will affect the newline property of the block statement?

don't believe so, but it doesn't matter since you're using floats. they are out of the normal flow.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > problems displaying divs inline or as a block

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 5 hosted by Hostway. 
Stay green...Green IT