i'm guessing this is simple?

twistedsoul · 04-09-2009, 06: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, 07:44 PM

this is what I was trying ath the mintute but its not working

Code:

.rss {
	float: right;
}
.leftnav {
	float: left;
}

BoldUlysses · 04-09-2009, 08: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-09-2009, 11:22 PM

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

Code:

.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 -

Code:

<!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, 05:35 PM

sorry for a real late reply, away easter weekend

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, 12: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, 03:20 PM

Hello again zooeyglass,

Your .container does have floats that are not cleared. You can see by adding a background color like this -

Code:

.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 -

Code:

.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 -

Code:

.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 -

Code:

      <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, 03:31 PM

much thanks!