7 Replies - 4572 Views - Last Post: 02 March 2012 - 03:18 PM

#1 PixelBit  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 233
  • Joined: 17-July 11

Image placement destroying the rest of the layout.

Posted 02 March 2012 - 10:48 AM

Ok so here's what I have now: http://relent.dyndns...lSnow/index.php

Here's what it's supposed to be: http://i42.tinypic.com/2n6ss9t.png

I think you can see the problem right? The ribbon that I have placed, ruins the layout, when it is not present the layout looks how it should, when it is placed it does... well... that. Please help!

Here is my code:

The html:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
    <title>Digital Snow Designs</title>
    <link href="mainstyle.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="homestyle.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="container">
	<?php include("nav.html"); ?>
    <section>			

		<article id="about">
    	<div id="ribbon" />
		<div style="clear:both" />
			<hgroup>
        		<h3>About Digital Snow Designs</h3>
			</hgroup>
        	<p>I am an English college student studying
				Computing, Mathematics, Physics and 
				Economics. I have always had an interest in
				computers and the internet and one day
				decided to start getting more involved. A few 
				years on and here I am, making engaging and 
				interactive websites.
				<br />
				<br />
				I design and build websites, with a variaty of 
				tools including; xHtml, Css, Php, MySQL and
				Javascript.</p>
        </article>
        <article id="tagline">
        	<h4>You talk I make people listen, because I'm a web designer and that's what I do.</h4>
        </article>
	</section>
	<div style="clear:both" />
	<?php include("footer.html"); ?>
</div>
</body>
</html>



CSS:
#about {
	width: 598px;
	float: left;
	background: #cddfff;
	border: solid #1567ff 1px;
	margin-top: 20px;
}

#tagline {
	width: 344px;
	height: 432px;
	background: url("images/tagline.png")no-repeat;
	text-indent: -99999px;
	float: right;
	margin-top: 40px;
}

#about h3 {
	height: 72px;
	width: 513px;
	text-indent: -99999px;
	background: url("images/name.png") no-repeat;
	margin-top: 10px;
	margin-left: 60px;
	margin-bottom: 40px;
}

#about p {
	padding: 5px;
	padding-left: 60px;
	font-size: 24px;
	color: #6098ff;
}

#about #ribbon{
	height: 180px;
	width: 55px;
	background: url("images/ribbon.png") no-repeat;
	margin-left: 5px;
	margin-top: -25px;
}




Is This A Good Question/Topic? 0
  • +

Replies To: Image placement destroying the rest of the layout.

#2 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 65
  • View blog
  • Posts: 239
  • Joined: 22-November 10

Re: Image placement destroying the rest of the layout.

Posted 02 March 2012 - 11:33 AM

In your css add this to your '#about p' float: left; width: 450px;

This should fix your problem as I just used firebug to do this.
Was This Post Helpful? 1
  • +
  • -

#3 PixelBit  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 233
  • Joined: 17-July 11

Re: Image placement destroying the rest of the layout.

Posted 02 March 2012 - 11:40 AM

View Postexiles.prx, on 02 March 2012 - 11:33 AM, said:

In your css add this to your '#about p' float: left; width: 450px;

This should fix your problem as I just used firebug to do this.


Thanks that fixed the text, but its still messing with the title :/
Was This Post Helpful? 0
  • +
  • -

#4 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 65
  • View blog
  • Posts: 239
  • Joined: 22-November 10

Re: Image placement destroying the rest of the layout.

Posted 02 March 2012 - 11:48 AM

Modify your #about h3 background style to this:

#about h3 { background: url("images/name.png") no-repeat scroll 0 20px transparent; }


The first zero/position moves the background left to right, and the second zero/position moves the background up and down.

This post has been edited by exiles.prx: 02 March 2012 - 11:50 AM

Was This Post Helpful? 1
  • +
  • -

#5 PixelBit  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 233
  • Joined: 17-July 11

Re: Image placement destroying the rest of the layout.

Posted 02 March 2012 - 11:51 AM

View Postexiles.prx, on 02 March 2012 - 11:48 AM, said:

Modify your #about h3 background style to this:

#about h3 { background: url("images/name.png") no-repeat scroll 0 20px transparent; }


The first zero/position moves the background left to right, and the second zero/position moves the background up and down.


Thanks :o I didn't think of background position *slaps head*. Anyhow big help thanks :) Not sure what the scroll and transparent things do though :P
Was This Post Helpful? 0
  • +
  • -

#6 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 65
  • View blog
  • Posts: 239
  • Joined: 22-November 10

Re: Image placement destroying the rest of the layout.

Posted 02 March 2012 - 12:05 PM

Check out this link it will explain the background properties. Also, I would recomend installing firebug if you plan on doing a lot of web sites. Firebug allows you to dynamically add/remove CSS, HTML, etc...
Was This Post Helpful? 0
  • +
  • -

#7 PixelBit  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 233
  • Joined: 17-July 11

Re: Image placement destroying the rest of the layout.

Posted 02 March 2012 - 12:33 PM

View Postexiles.prx, on 02 March 2012 - 12:05 PM, said:

Check out this link it will explain the background properties. Also, I would recomend installing firebug if you plan on doing a lot of web sites. Firebug allows you to dynamically add/remove CSS, HTML, etc...

I have it but I don't know how to dynamically chance the css :o
Was This Post Helpful? 0
  • +
  • -

#8 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 65
  • View blog
  • Posts: 239
  • Joined: 22-November 10

Re: Image placement destroying the rest of the layout.

Posted 02 March 2012 - 03:18 PM

Once you click on the little bug at the top and you get the screen that pops up below there is a small window on the right. If you use the 'element select' button (blue pointer next to the orange bug on the top left hand side of the firebug window) and click on an element the css will display to the right. You can change the css simply by clicking on a property value and changing it or adding new properties by right clicking. If this doesn't help then google firebug tutorials or firebug help and I am sure there are many tutorials and help docs out there.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1