Need Help with CSS

dartsfan · 15-10-2009 9:46pm #1

Hi,

I'm looking for some help with positioning on my web page. Please see the sample web page. Basically, I'm happy with the positioning of the 4 navigation links. However, I'd like the text in "textContent" to be positioned to the right of this and then have the "picture" to the right of this again.
I've tried lots of combinations with my CSS file but just can't achieve this.
Would someone be able to point out what I need to do?

Thanks a lot!

dartsfan · 15-10-2009 9:49pm

HTML file attached

Eoin · 15-10-2009 10:04pm

You haven't attached the stylesheet. Just copy and paste it between [noparse]

[/noparse] tags

dartsfan · 15-10-2009 10:20pm

eoin wrote: »
You haven't attached the stylesheet. Just copy and paste it between [noparse]
[/noparse] tags

I don't have the CSS to hand, I just created that sample as a rough outline of what I wanted to do. I'll try and upload the real CSS tomorrow.
If I just got a few pointers for the time being it'd be great. As in should I just use a table, absolute positioning, floating etc?
Thanks.

Eoin · 15-10-2009 10:24pm

Ah right. Have a look at this page and see if a layout there suits. No need to use a table for this, as it's not tabular data.

If the picture is related to the text content, then perhaps it should be the same div and aligned to the right. But if it's more of a global/stand alone image then it might make more sense to have it in a 3rd column.

Pablod · 15-10-2009 10:44pm

Would help like to see your current style sheet,
But if your just looking for a basic Left Navigation Column, with your text to the right in the container and image to the right of that again

Try this and see if it helps, if not using tables.

1) Apply a left float to your <div id="navigationContainer">
2) Add your next div/text content paragraph in the "content", float that to the left aswell, make sure to give it a width.
3) Add your image on the right after the text content and float it right when styling it

This should give you the desired layout
Hope this helps

dartsfan · 16-10-2009 8:26pm

Right here goes so with updated HTML and CSS files. Couldn't make any progress with above suggestions. Thanks.

<!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 http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Designer Kitchens, Cabinets, Wardrobes in Galway - Home</title>
        <link rel="stylesheet" type="text/css" href="assets/css/styles.css">
    </head>
    <body id="home">
        <div id="header">
            <div class="wrapper">
                <h1 class="logo">CASTLE KITCHENS</h1>
                <p class="tagline">
                    Designer Kitchens, Cabinets, Wardrobes
                </p>
            </div>
        </div>
        <div id="container">
            <div id="navContainer">
                <ul id="nav">
                    <li>
                        <a id="navHome" class="navActive" href="#">HOME</a>
                    </li>
                    <li>
                        <a id="navServices" href="about_us.html">SERVICES</a>
                    </li>
                    <li>
                        <a id="navGallery" href="showroom.html">GALLERY</a>
                    </li>
                    <li>
                        <a id="navContact" href="contact_us.html">CONTACT</a>
                    </li>
                </ul>
            </div>
            <div id="content">
                <h2 class="dreamKitchen">Kitchen Heading</h2>
                <p class="intro">
                    Text will go here. Text will go here. Text will go here. 
                    Text will go here. Text will go here. Text will go here.  
                    Text will go here. Text will go here. Text will go here. 
                    Text will go here. Text will go here. Text will go here.  
                    Text will go here. Text will go here. Text will go here. 
                    Text will go here. Text will go here. Text will go here.  
                    Text will go here. Text will go here. Text will go here. 
                    Text will go here. Text will go here. Text will go here.  
                    Text will go here. Text will go here. Text will go here. 
                    Text will go here. Text will go here. Text will go here.  
                    Text will go here. Text will go here. Text will go here. 
                    Text will go here. Text will go here. Text will go here. 
                </p>
				<img id="pictureTile" src="assets/gallery/kitchen1.jpg" alt="Designer Kitchen"/>
            </div>
		</div>
        <div id="footer">
            <p>
                Footer Info
             </p>
        </div>
    </body>
</html>

/*orange: #ffb756  mainCyan: #007c99*/
/*Teal: #c2f1ff*/

/* -----------------------------------*/
/* ---------->>> =GLOBAL <<<-----------*/
/* -----------------------------------*/
#home, #services, #gallery, #contact {
	font-family: Verdana;
	font-size: 0.75em; 
	letter-spacing: 1px;
	line-height: 20px;
	color: #ffffff; /* text colour */
	}
	/* background here is the main background colour */
	#home {background: #BE0001 ;}
	#services {background: #BE0001 ;}
	#gallery {background: #BE0001 ;}
	#contact {background: #BE0001 ;}
* {  
	margin:0; 
	padding:0; 
	} 
table { 
	border-collapse:collapse; 
	border-spacing:0;
	} 
ol,ul {list-style: none;}
img {border: none;}
a {outline: none;}
/* -----------------------------------*/
/* ---->>> =Page Structure <<<--------*/
/* -----------------------------------*/
#header {
	background: #ffffff; 
	height: 100px;
	border-top-style:solid;
	border-top-width:11px;
	border-top-color: #000000;
	}
	#header .wrapper {
	padding: 0 10px 0 10px; 
	margin: 0 auto;
	}		
#navContainer {
	width: 161px;
	margin: 20px 20px 0 100px;
	border-style: solid;
	}
#container {
	/*padding: 30px 90px 0 150px;*/
	border-style: solid;
	}
#pictureTile {
	border-style:solid;
	border-width:9px;
	border-color: #ffffff;
	}
#homeContent {
	padding: 0 0 0px 0;
	border-style:solid;
	border-width:1px;
	border-color: #ffffff;
	width: 400px;
	}
#content {
	margin: 0 0 0 0;
	border-style: solid;
	/*width: 500px;*/
	overflow: visible; 
	}
#footer {
	float: left;
	margin: 0 0 0 0px;
	border-style: solid;
	}
	#home #footer {margin: 0px 0 0 0px !important;}
	#services #footer {margin: 0 0 0 0px !important;}
	#gallery #footer {margin: 0 0 0 0px !important; }
	#contact #footer {margin: 0px 0 0 0px !important;}
#showroomGallery {
	border-style:solid;
	clear: left;
	background-color:#ffffff;
	border-color: #A80115;
	border-width: 4px;
	width:840px;
	height: 330px;
	
}
#galleryPicture {
	float: left;
	margin-left:20px;
	margin-top:20px;
	
}
/* -----------------------------------*/
/* ---------->>> =Nav <<<-----------*/
/* -----------------------------------*/
#nav li {
	height: 45px;
	overflow: hidden;
	
	}
#nav li a {
	display: block;
	line-height: 28px;
	text-indent: -5000px;
	overflow: hidden;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color:#FF5C59;
	border-right-style: solid;
	border-right-width: 1px;
	border-right-color:#FF5C59;
	}
	#navHome {
		background: url(../img/castle_home_nav.gif) no-repeat;
		height: 45px;
		}
	#navServices {
		background: url(../img/castle_about_us_nav.gif) no-repeat;
		height: 45px; 
		}
	#navGallery {
		background: url(../img/castle_showroom_nav.gif) no-repeat;
		height: 45px;
		}
	#navContact {
		background: url(../img/castle_contact_us_nav.gif) no-repeat;
		height: 45px;
		}
	#nav li a:hover {
		background-position: -160px 0;
		}
	#nav li .navActive {
		background-position: -320px 0;
		cursor: default;
		border-top-width: 0px;
		border-right-width: 0px;
	}
	#nav li .navActive:hover {
		background-position: -320px 0 !important;	
		}
/* -----------------------------------*/
/* ---------->>> =Headings <<<--------*/
/* -----------------------------------*/
.logo {
	float: left;
	background: url(../img/castle_kitchens_logo.gif) no-repeat;
	width: 375px;
	height: 95px;
	text-indent: -6000px;
	display: block;
	overflow: visible;
	margin: 10px 0 0 0;
	}
.showroomHeading{
	text-indent: -6000px;
	background: url(../img/showroom_heading.gif) no-repeat;
	height: 30px;
	}
.contactHeading{
	text-indent: -6000px;
	background: url(../img/contact_us_heading.gif) no-repeat;
	height: 30px;
	}
.aboutHeading{
	text-indent: -6000px;
	background: url(../img/about_heading.gif) no-repeat;
	height: 30px;
	}

/* -----------------------------------*/
/* -------->>> =Link Styles <<<-------*/
/* -----------------------------------*/
a:link, a:visited {
	color: #ffb756; 
	text-decoration: none;
	}
a:hover{
	text-decoration: underline;
	color: #ffb756; 
}
/* -----------------------------------*/
/* ----->>> =Text Styles <<<----------*/
/* -----------------------------------*/
.tagline {
	float: right;
	background: url(../img/castle_tagline.gif) no-repeat;
	width: 400px;
	height: 70px;
	text-indent: -6000px;
	display: block;
	overflow: hidden;	
	margin: 20px 0 0 0;
	}

.intro {
	width: 400px;
	}
#footer p {
	/*float: left;*/
	font-size: 1.1em;
	color: #F54E4C;
	display: inline;
	letter-spacing: 0px;
	font-weight: bold;
	}
#footer a:link, a:visited, a:hover{
	color: #F54E4C;
}
.contactHeadings {
	vertical-align: top;
	padding-right: 20px;
}
.contactTable {
	float: left;
	margin: 20px 0 0 20px;
	line-height: 25px;
}

Pablod · 16-10-2009 10:31pm

ok, heres my attempt at an answer

should help somewhat

float your #navcontainer left
and float your class style .intro left aswell

and I noticed you have no widths or heights applied to lot of your divsyour especially Header or Header.wrapper.
apply a width/height to the .wrapper and you will see it take shape

Hope this helps

Cheers
Paul

Liam Byrne · 17-10-2009 4:49pm

And remember that if you're floating a tag left or right, include "display:inline" or else the crappy IE6 browser will double the margin incorrectly.

Pablod · 17-10-2009 4:54pm

Liam Byrne wrote: »

And remember that if you're floating a tag left or right, include "display:inline" or else the crappy IE6 browser will double the margin incorrectly.

True True, forgot that.

(slightly off topic) I wish MS would just enforce an upgrade so everyone has to have IE7 minimum.
In my honest opinion anyone still on IE6 deserves to see the extra margin lol

dartsfan · 17-10-2009 6:51pm

Thanks for your help, got that part sorted. Where was I going wrong with the above? Should I always be specifying widths and heights for best control?

Liam Byrne · 17-10-2009 7:01pm

Pablod wrote: »

True True, forgot that.

(slightly off topic) I wish MS would just enforce an upgrade so everyone has to have IE7 minimum.
In my honest opinion anyone still on IE6 deserves to see the extra margin lol

Some IT departments would have a major job re-testing everything. Although it's probably fair enough to say that they probably should have upgraded by now.

I'd lose the "minimum" re IE7; IE8 is a disaster.

If everyone was on IE7 and the fully-standards-compliant browsers then great, but IE8 has opened the can of worms again!

dartsfan · 18-10-2009 5:20pm

Just noticed now a problem with Internet Explorer and double line breaks. This doesn't seem to be a problem in Firefox. Is there a quick fix for this?
Thanks.

Need Help with CSS

Comments