Still cant quite understand CSS positioning

November 13, 200916 yr

After reading several books, watching video tutorials online and browsing this forum, I still cant get my head around positioning with CSS.

I understand the concepts, and what does what. But im still having problems when positioning certain objects on webpages, especially when theres quite a few different elements.

What im trying to achieve: The whole box is run by java, as it is a portfolio slideshow. The box has a background image and I am trying to position my h1 text so that it rests in the top left with some padding, then my description text will be directly underneath it. I also want my two navigation buttons (the arrows) to be beside each other, which I seem to be having a problem doing, then later on I will relative position them so that they are next to the white line which divides the text and image.

I really would love to fully understand positioning with CSS, as its such an important and useful thing to know when developing websites, and it seems that this is the one thing about CSS I can never get right!

Thanks alot people

So heres a screenshot of my current page:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Mosuro Design provides creative, fresh and affordable graphic/web designs for your needs. Logos, business cards, websites, posters, leaflets, branding, product design" />
<meta name="keywords" content="web design,graphic design,logos,business cards,websites,posters,leaflets,branding,product design" />
<meta name="author" content="Ashley Mosuro" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mosuro Design | Portfolio</title>

<link href="css/portfolio.css" rel="stylesheet" type="text/css" />

<!--FLASH EMBEDDING-->

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("menu_bar", "8.0.0",false);
</script>

<!--J FLOW PORTFOLIO-->

<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="js/jquery.flow.1.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function() {
$("div#controller").jFlow({
slides: "#slides",
width: "900px",
height: "250px"
});
});
</script>

</head>

<body>

<div id="main_logo">
<img src="images/main_logo.gif" width="298" height="118" alt="Mosuro Design" />
</div>

<!--MENU BAR-->

<object id="menu_bar" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="250" height="25">
<param name="movie" value="swf/menu_bar.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="swf/menu_bar.swf" width="250" height="25">
<!--<![endif]-->
<div>
<h2>You need to download flash to view this content!</h2>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>

<div id="main_container">

<div id="controller" class="hidden">
<span class="jFlowControl">No 1</span>
<span class="jFlowControl">No 2</span>
<span class="jFlowControl">No 3</span>
<span class="jFlowControl">No 4</span>
</div>

<!--SLIDE 1-->

<div id="slides"><!--PORTFOLIO CONTENT STARTS-->
<div id="first">
<div class="portfolio_text"><!--PORTFOLIO TEXT STARTS-->
<h1 class="portfolio">Cambridge Images (Website)</h1>
<p class="description">This website was designed and developed by myself, for award-winning travel photographer Alan McArthur. Clean and simple is what he desired, clean and simple is what he was provided with and as a result his photography is able to shine as the main focus...</p>
</div><!--PORTFOLIO TEXT ENDS-->
<div id="portfolio_image1"><!--PORTFOLIO IMAGE STARTS-->

<div class="portfolio_buttons"><!--NEXT AND PREVIOUS BUTTONS STARTS-->
<div class="portfolio_btn">
<img class="jFlowNext" src="images/next_button.png" alt="Next"  />
<div class="portfolio_btn">
<img class="jFlowPrev"src="images/prev_button.png" alt="Previous" />
<br />
</div>
</div>
</div><!--NEXT AND PREVIOUS BUTTONS END-->
</div><!--PORTFOLIO IMAGE ENDS-->
</div>




<!--SLIDE 2-->
<div id="second">
<div class="portfolio_text"><!--FEATURED TEXT STARTS-->
<h1 class="portfolio">Randall Technologies Ltd</h1>
<p>Randall Technologies are a IT solutions company based in Manchester, founded by Leon Randall. </p>
</div><!--FEATURED TEXT ENDS-->
<div id="portfolio_image2"><!--FEATURED IMAGE STARTS-->
<div class="portfolio_buttons"><!--NEXT AND PREVIOUS BUTTONS STARTS-->
<div class="portfolio_btn">
<img src="images/next_button.png" alt="Next" class="jFlowNext" />
<div class="portfolio_btn"><img src="images/prev_button.png" alt="Previous" class="jFlowPrev" /></div>
</div>
</div><!--NEXT AND PREVIOUS BUTTONS END-->
</div><!--FEATURED IMAGE ENDS-->
</div>



<!--SLIDE3-->
<div id="third">
<div class="portfolio_text"><!--FEATURED TEXT STARTS-->
<h1 class="portfolio">sgfrgydrtt</h1>
<p>Randall Technologies are a IT solutions company based in Manchester, founded by Leon Randall. </p>
</div><!--FEATURED TEXT ENDS-->
<div id="portfolio_image3"><!--FEATURED IMAGE STARTS-->
<div class="portfolio_buttons"><!--NEXT AND PREVIOUS BUTTONS STARTS-->
<div class="portfolio_btn">
<img src="images/next_button.png" alt="Next" class="jFlowNext" />
<div class="portfolio_btn"><img src="images/prev_button.png" alt="Previous" class="jFlowPrev" /></div>
</div>
</div><!--NEXT AND PREVIOUS BUTTONS END-->
</div><!--FEATURED IMAGE ENDS-->
</div>

</div><!--PORTFOLIO CONTENT ENDS-->

</div>















<div id="footer">
<p>© 2009 Mosuro Design | Website developed by Ashley Mosuro | <a href="contact.html">Contact me</a></p>
</div>


</body>
</html>

CSS:

@charset "UTF-8";
/* CSS Document */
body {
background-color:#000;
margin:0 auto;
}
#main_container {
position:relative;
left:auto;
right:auto;
top:100px;
}
#main_logo {
position:relative;
left:125px;
margin-bottom:5px;
}
h2 {
font-family:verdana;
font-size:12px;
color:#fff;
}
#menu_bar {
float:right;
clear:both;
margin-right:50px;
}

/*FOR PORTFOLIO*/


#controller {
color:#fff;
}
#slides {
color:#fff;
height:300px;
}
#portfolio_text {
width:450px;
}
h1.portfolio {
font-family:verdana;
color:#fff;
font-size:16px;
float:left;
padding:15px;
clear:both;
}
p.description {
color:#fff;
font-family:verdana;
font-size:12px;
width:450px;
float:left;
}
#first {
background-image:url(../images/portfolio_image1.png);
background-repeat:no-repeat;
background-position: left top;
min-height:250px;
}
#second {
background-image:url(../images/portfolio_image2.png);
background-position: left top;
background-repeat:no-repeat;
min-height:250px;
}
#third {
background-image:url(../images/portfolio_image2.png);
background-position: left top;
background-repeat:no-repeat;
min-height:250px;
}

#portfolio_buttons {
position:relative;
bottom:10px;
left:400px;
cursor: pointer;
height:120px;
}
.portfolio_btn {
height:50px;
width:50px;
}

.hidden {
display: none; /*hides our 2nd and 3rd featured slides*/
}
#footer {
margin-top:150px;
position:relative;
bottom:10px;
font-family:verdana;
font-size:10px;
color:#ed1c24;
}
#footer a {
text-decoration:none;
color:#ed1c24;
}

November 14, 200916 yr

Author

Sorry to bring this up! Really need some help

November 14, 200916 yr

Sorry to bring this up! Really need some help

Hi,

Try this....I'm not an expert, but hopefully it might work.

HTML

<h1>Cambridge Images (Website)</h1>

<p>This website was designed and developed by myself, for award-winning travel photographer Alan McArthur. Clean and simple is what he desired, clean and simple is what he was provided with and as a result his photography is able to shine as the main focus...</p>

</div>

CSS

* {

margin:0;

padding:0;

}

/* zeroes all margins and padding (put at start of stylesheet) */

#first {

background:black;

width:500px;/* however wide you want the slide*/

height:300px;

position:relative;

}

#first h1, p {

font-family:Verdana, Arial, Helvetica, sans-serif;

color:#fff;

}

#first h1 {

font-size:16px;

padding:15px 0 0 15px;

}

#first p {

font-size:12px;

width:450px;

padding:10px 0 0 15px;

}

.buttons {

width:103px;

height:50px;

position:absolute;

right:15px;

top:240px;

}

.buttons img.nextButton, .buttons img.prevButton {

width:50px;

height:50px;

float:left;

}

.buttons img.nextButton {

margin-right:3px;

}

Cheers

ashley_90
1

November 15, 200916 yr

Author

Cheers mate, very busy weekend so will be trying this out tomorrow. Will let you know if it works.

November 16, 200916 yr

Author

Hmm...didn't seem to work :/

You managed to get the paragraph text to rest underneath the h1 text, and the navigation buttons were side-by-side. But theres no background image anymore and the buttons do not work.

I dont supposed there is a way to solve this without completely changing the way I have structured the html, because I think that by changing it too much will risk not making the java script work. Im not sure though.

Anybody?

EDIT: Also, just realised how the bottom of my java portfolio cuts out on the other slides (2, 3 and 4). Have no idea why this is happening because the image is the exact size as the box (900x250px) and the css has the same properties for all the slides :S

November 16, 200916 yr

This <img class="jFlowNext" src="images/next_button.png" alt="Next" /> is just an image, not an image link.

You have <div class="portfolio_text"> and <div class="portfolio_buttons"> in the html but #portfolio_text and #portfolio_buttons in the css when they should be .portfolio_text and .portfolio_buttons

That won't cure the problems, but you need to correct those.

November 16, 200916 yr

Author

Thanks alot!

Pretty much solved my problem by letting me know about that.

Stupid mistake!!

Still cant quite understand CSS positioning

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)