PDA

View Full Version : CSS Image Positioning

Naquedon
08-07-2006, 11:31 PM
Hey guys, wow it's been a long time since I was last here, things have changed so much!

Anyway, I used to be good at html and making websites however, I drifted from it and now things have moved on from table based designs onto CSS, which I am currently trying to get to grips with. I have made a page I think is ok-ish...

I know there is tons of code that isn't needed and doesnt validate right now, I will clean it up later. Now - here's my problem, I am trying to position the image to the top right corner of the content div and I am not quite sure I am taking the right approach... I would like the image to have a border, then some padding then the image itself with a space for a caption underneath, I currently have the image within a DIV but i'm not convinced that this is the right way to go about it, what if i wanted more than one image, would I need to have a DIV for each image?

Sorry if I sound a bit thick, as soon as I ran into problems, I knew you guys would help me out!

Here's my site: http://www.mickwilko.com/test the CSS is at /style.css

Thanks, guys

Michael
Naquedon
08-08-2006, 11:37 AM
This is my CSS:



/* basic elements */
html {
margin: 0px;
padding: 0px;
}
body {
font: 9pt/17pt georgia;
color: #555753;
background: #ffe680;
margin: 0px;
padding: 20px;
min-height: 100%;
}

.box {
font: 9pt/17pt georgia;
color: #ffe680;
background: #ffe680;
border-style: solid;
border-color: #000;
border-width: 0px;
margin: 0px;
padding: 5px;
min-height: 100%;
}

.header {
font: 9pt/17pt georgia;
color: #0f0;
background: #ffcc00;
height: 66pz;
border-style: solid;
border-color: #000;
border-width: 1px;
margin: 0px;
padding: 0px;
min-height: 100%;
}

.content {
font: 9pt/17pt georgia;
color: #000;
background: #fff;
border-style: solid;
border-color: #000;
border-width: 1px;
margin: 0px;
padding-left: 220px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;

min-height: 100%;
}


.nav {
float: left;
font: 9pt/17pt georgia;
color: #0f0;
background: #fff;
border-style: solid;
border-color: #000;
border-width: 1px;
margin: 0px;
padding: 0px;
min-height: 100%;
}

h1 {
font: verdana;
size: 42px;
color: #000080;
}

.image {
color: #0f0;
background: #fff;
border-style: solid;
border-color: #000;
border-width: 1px;
margin: 0px;
padding: 0px;
min-height: 100%;
}


/* LINK LIST CODE */

#navcontainer
{
float: left;
background: #fff2bf;
width: 200px;
border-style: solid;
border-color: #000;
border-width: 1px;
margin: 0 auto;
padding: 1em 0;
font-family: georgia, serif;
font-size: 13px;
text-align: center;
text-transform: lowercase;
}

ul#navlist
{
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 70%;
}

ul#navlist li
{
display: block;
margin: 0;
padding: 0;
}

ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #f0e7d7;
border-style: solid;
color: #777;
text-decoration: none;
background: #ffe680;
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a
{
background: #ffe680;
color: #777;
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #000;
background: #ffcc00;
border-color: #000;
}
Merike
08-08-2006, 11:38 AM
Is the following closer to what you want?

* put your image div before first paragraph
* . is for class, # is for id, use this css:
#image {float:right;
color: #0f0;
background: #fff;
border-style: solid;
border-color: #000;
border-width: 1px;
margin: 0px;
padding: 0px;
min-height: 100%;
width:400px;}
Naquedon
08-08-2006, 11:38 AM
And my HTML...



<html>

<head>
<LINK href="style.css" rel="stylesheet" type="text/css">
<title>Hello World</title>
</head>

<body>

<div class="box">
<div class="header"><h1>Header</h1></div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>

<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>


<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi elementum, odio commodo tincidunt pretium, mi eros facilisis purus, ut ultrices neque sapien quis risus. Praesent euismod consectetuer augue. Pellentesque velit neque, ultricies id, euismod facilisis, condimentum et, magna. Proin tellus. Donec mollis dolor non lectus. Duis leo. Aenean mollis semper orci. Maecenas interdum consequat leo. Maecenas tempor, diam blandit bibendum ultricies, mi risus sollicitudin leo, non semper eros odio vel metus. Vestibulum enim eros, laoreet et, condimentum eu, elementum sit amet, est. In hac habitasse platea dictumst. Morbi imperdiet est non odio. Praesent pulvinar dignissim elit. Mauris sed pede in mauris ullamcorper consectetuer. Proin vestibulum. Donec sed leo.</p><div id="image"><img src="colin.jpg"></div>

<p>Nullam pulvinar magna vitae neque. Duis at lectus. Vestibulum euismod. Phasellus nec mauris. Nullam pretium metus vel purus. Ut fermentum. Sed iaculis faucibus metus. Cras pede. Maecenas tincidunt purus nec arcu. Suspendisse nec nibh sed ante semper fermentum.</p>

<p>Duis purus. Ut quis odio eget urna viverra fermentum. Duis cursus. Pellentesque et mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras sapien velit, mattis dictum, facilisis sed, sagittis tempus, metus. Aenean malesuada augue vel nibh. Vivamus pretium enim placerat arcu. Praesent porttitor mi at lorem. Proin consequat, metus id rhoncus congue, turpis odio lacinia risus, sodales fermentum lectus urna non metus. Maecenas odio ante, consequat at, malesuada id, pretium sit amet, dui. Donec venenatis hendrerit massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam auctor. Mauris ligula. Sed a dui. Donec mauris. Curabitur est sem, feugiat nec, sollicitudin eu, tincidunt nec, urna. Nam ac velit. Donec fringilla.</p>

<p>Vivamus accumsan felis a neque. Maecenas viverra. Praesent fringilla. In aliquet. Donec nonummy. ``` sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ut turpis. Etiam libero. Sed volutpat, libero non tempor feugiat, enim erat facilisis elit, eu tincidunt sem est at purus. Pellentesque condimentum bibendum ipsum. Donec magna turpis, egestas nec, nonummy eu, dignissim et, eros. Integer tristique sodales mi. Proin magna. Sed vitae augue vitae massa mattis aliquam. Phasellus eget sapien eget dolor hendrerit tempus.</p>

</p>In sagittis enim nonummy ipsum. Sed tristique nibh a orci. Integer molestie lorem id arcu. Quisque nisi. Ut laoreet ornare sapien. Suspendisse volutpat ante quis erat. Cras mattis, est sit amet laoreet vulputate, sem mi tempus tellus, sit amet ullamcorper velit leo a ipsum. Quisque consequat. Proin vitae purus et neque ultricies congue. Praesent faucibus, est a fringilla posuere, massa odio posuere purus, in dignissim felis tortor et nulla.</p>
</div>

</div>



</body>