Forums
New posts
Articles
Product Reviews
Policies
FAQ
Log in
Register
What's new
Search
Search
Search titles only
By:
New posts
Menu
Log in
Register
Install the app
Install
Forums
Digital Lifestyle
Web Design and Hosting
Image placement with CSS
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="dziner" data-source="post: 44183"><p>Here's an image of what I'm trying to achieve.</p><p></p><p><img src="http://www.greencracker.com/images/DesignSample.gif" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p>Here's a sample of some of the code. Here I'm using a paragraph tag to try to handle the rows/columns. I thought I would be able to use the <p> tag kinda like a table row. Unfortunately it doesn't work.</p><p></p><p>[CODE]<div id="left-nav"></p><p><ul></p><p><li>links go here</li></p><p></ul></p><p><h4>mini-sites</h4></p><p><p class="minisites"><img src="/images/mini_acer.gif" width="76" height="30" /><img src="/images/mini_antec.gif" width="76" height="30" /></p></p><p></div></p><p>[/CODE] </p><p></p><p>And of course the CSS to go along with it.</p><p></p><p>[CODE] #left-nav {</p><p> float: left;</p><p> width: 200px;</p><p> margin: 0;</p><p> background-color: #E5E5E5;</p><p> border: 1px dotted #333;</p><p> }</p><p></p><p> #left-nav h4{</p><p> font-family: Arial, Verdana, Helvetica, sans-serif;</p><p> font-size: 16px;</p><p> font-weight: bold;</p><p> color: #333;</p><p> margin-left:10px;</p><p> margin-bottom:8px;</p><p> margin-top: 5px;</p><p> }</p><p></p><p> #left-nav ul{</p><p> margin-left:0;</p><p> padding-left:0;</p><p> margin-top:0;</p><p> list-style-type: none;</p><p> } </p><p></p><p> #left-nav li{</p><p> font-family: Verdana, Arial, Helvetica, sans-serif;</p><p> font-size: 10px;</p><p> margin-left:0;</p><p> padding-top: 5px;</p><p> padding-bottom: 5px;</p><p> padding-left:0;</p><p> margin-top:5px;</p><p> }</p><p></p><p> .minisites {</p><p> margin-left: 10px;</p><p> margin-right: 10px;</p><p> }</p><p>[/CODE]</p></blockquote><p></p>
[QUOTE="dziner, post: 44183"] Here's an image of what I'm trying to achieve. [IMG]http://www.greencracker.com/images/DesignSample.gif[/IMG] Here's a sample of some of the code. Here I'm using a paragraph tag to try to handle the rows/columns. I thought I would be able to use the <p> tag kinda like a table row. Unfortunately it doesn't work. [CODE]<div id="left-nav"> <ul> <li>links go here</li> </ul> <h4>mini-sites</h4> <p class="minisites"><img src="/images/mini_acer.gif" width="76" height="30" /><img src="/images/mini_antec.gif" width="76" height="30" /></p> </div> [/CODE] And of course the CSS to go along with it. [CODE] #left-nav { float: left; width: 200px; margin: 0; background-color: #E5E5E5; border: 1px dotted #333; } #left-nav h4{ font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #333; margin-left:10px; margin-bottom:8px; margin-top: 5px; } #left-nav ul{ margin-left:0; padding-left:0; margin-top:0; list-style-type: none; } #left-nav li{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; margin-left:0; padding-top: 5px; padding-bottom: 5px; padding-left:0; margin-top:5px; } .minisites { margin-left: 10px; margin-right: 10px; } [/CODE] [/QUOTE]
Verification
Post reply
Forums
Digital Lifestyle
Web Design and Hosting
Image placement with CSS
Top