...

View Full Version : i'm guessing this is simple?



twistedsoul
04-09-2009, 07:46 PM
hi there, I'm new to this styling and laying out using ccs so sorry for sounding like a dumass still tryin to grip it. Anyways the thing I'm havg trouble with is I was my title image aligned left of the div and my rss icon aligned right, but I've tried a few ways and it just muddles them up?

<div class="sidebar">
<p><img src="images/blog.png" alt="mini blog" width="161" height="47" /><a href="/n13news/rss.php"><img style="border: 0px" src="images/rss.png" alt="RSS Subscribe" /></a></p>
<p>text goes here.</p>
</div>

twistedsoul
04-09-2009, 08:44 PM
this is what I was trying ath the mintute but its not working
.rss {
float: right;
}
.leftnav {
float: left;
}

BoldUlysses
04-09-2009, 09:35 PM
Not enough info. We'll need to see your actual page in order to figure out how it's being "muddled up." Providing a link to your page is especially crucial when dealing with image issues.

Excavator
04-10-2009, 12:22 AM
Yes twistedsoul,
Not enough info, otherwise it would be simple.
To put things side by side you need to float them.

In the snippet of html you posted there is neither a .leftnav or .rss class so your CSS
.rss {
float: right;
}
.leftnav {
float: left;
}
isn't going to do anything.

================

Without knowing how wide your .sidebar is or what size your rss image is... I just grabbed some random images and did 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">
html, body {
font: 14px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
outline: none;
border: none;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
.sidebar {
width: 300px;
height: 400px;
float: left;
overflow: auto;
}
.sidebar img {
float: left;
}
.sidebar a {
float: right;
}
.sidebar p {
clear: both;
}

</style>
</head>
<body>
<div id="container">
<div class="sidebar">
<img src="blog.png" alt="mini blog" width="161" height="47" />
<a href="/n13news/rss.php"><img src="rss.jpg" alt="RSS Subscribe" width="86" height="117" /></a>
<p>text goes here.</p>
<!--end sidebar--></div>
<!--end container--></div>
</body>
</html>

twistedsoul
04-15-2009, 06:35 PM
sorry for a real late reply, away easter weekend :D

but anywys I've uploaded a sample page to show you http://www.skylinedesigns.co.uk/test/
the trouble is when I set my title image to float left and my rss button right the text does'nt sit nicely underneath instead sets itself in the middle of both images.

venegal
04-16-2009, 01:40 PM
Sounds like you are not clearing the floats properly before the text. Put the floats in a wrapper and give the wrapper overflow:auto;.

Excavator
04-16-2009, 04:20 PM
Hello again zooeyglass,

Your .container does have floats that are not cleared. You can see by adding a background color like this -
.container {
width: 1000px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
background: #f00;
}
If you clear the floats with overflow:auto; the .container expands to enclose the floated elements.
Like this -
.container {
width: 1000px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
background: #f00;
overflow: auto;
}

Here's an explanation of how that works - http://www.quirksmode.org/css/clearing.html


Along with your text, at the bottom your .foot is weird.
Add this to your CSS -

.sidebar {
float: right;
width: 30%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
overflow: auto;
}

.sidebar p {
clear: both;
margin: 0 10px;
}
.rss {
float: right;
}
.leftnav {
float: left;
}
.foot {
clear: both;
}

Added a bit to your markup too -

<div class="sidebar">
<img src="images/blog.png" alt="mini blog" class="leftnav" height="47" width="161"><a href="http://www.skylinedesigns.co.uk/n13news/rss.php"><img src="images/rss.png" alt="RSS Subscribe" class="rss" style="border: 0px none ;"></a>
<p>some words here some more words and even more to make this longer</p>
<p>some more words here </p>
</div>
<div class="foot">Content for class "foot" Goes Here</div>
</div>

twistedsoul
04-16-2009, 04:31 PM
much thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum