Need some css Help

modernmafiia · January 27, 2012

Hi im very noobie at css i really needed some help.

I coding in a template basically so far 70% i managed to code somehow :d

i made a div called content which is a image repeating where content will go

i made a nav menu on the left side and wanted the main content like text or other to go one the right hand side of the menu under the content div which is the background repeating please help

http://www.getthelabel.com/fcp/categorylist/dept/MHCoatsandjackets?filters=BRAND!adidas&removeFilter=BRAND&page=4

Ive managed to get most done but cant get the content place in the right position please help

css:

body {
margin: 0;
padding: 0;
font-size: 12px;
background-color: #efeded;
}
.wrap {
width: 100%;
}
.row {
width: 1050px;
margin: 0 auto;
}
#container {}
#header {
height: 113px;
background: url(title.png) no-repeat;
}
#title {
float: left;
width: 480px;
height: 113px;
}
#ads {
float: right;
width: 729px;
height: 91px;
}



#nav{
height: 60px;
background: url(topnav.png) no-repeat;
       background-repeat:repeat-x;
text-align: center;
}




#nav a {

color: #2fc0b7;
       font-size:17px;
font-family:Eurostile;
text-decoration: none;
padding-right: 35px;
}



#nav .padding {

padding-top: 20px;

}

.button {
   border: 1px solid #006;
   background: #2fc0b7;
}
.input{
   border: 1px solid #006;
   background: #fff;
}

#contentt{
       margin:0 auto;
       width: 993px;
       min-height:13px;
background: url(content.png);
       background-repeat:repeat-y;
}


#menu_side {
padding-top: 30px;
padding-left: 15px;
}

#menu_side ul.main_menu {
width: 160px;
margin: 0;
padding: 0;
}

#menu_side ul.main_menu li {
list-style:none;
width: 160px;
}
#menu_side ul.main_menu li a {
display: block;
width: 176px;
height: 37px;
text-indent: 10px;
line-height: 30px;
color: #ada7a7;
       font-size:15px;
font-family:Eurostile;
text-decoration: none;
background: url(nav.png) no-repeat;
}
#menu_side ul.main_menu li a:hover {
color: #dfdfdf;
background: url(navhover.png) no-repeat;
}

#right
{

float:right;
}

.spacer {
clear: both;
}

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>blahblah</title>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<META name="description" content="sfdsfsdfsdfsd">

<META name="keywords" content="sdfsdfsdf">

<META NAME="robots" CONTENT="index,follow"> 
<link rel="stylesheet" href="style.css" />



</head>
  <body>
    <div id="container" class="wrap">
<div id="header" class="row">


            <div id="ads">
                     <img src="ads.png">

	</div>

</div>


         <div id="nav">

       <div class="padding">
			<a href="">HOME</a>

			<a href="">MENS</a>
			<a href="">WOMENS</a>
			<a href="">BOYS</a>
			<a href="">GIRLS</a>
			<a href="">ACCESSORIES</a>



                   <input type="text" value="Search for Product...."  size="35" class="input"/>   <input type="submit" value="Search" class="button" />


             </div>
  </div>



                              <div id="contentt">



<div id="menu_side">
<ul class="main_menu">
<li><a href='index.php'>Home</a></li>
<li><a href='viewuser.php?u=2'>My Profile</a></li>
<li><a href='logout.php'>Logout</a></li>						
<li><a href='index.php'>Home</a></li>
<li><a href='viewuser.php?u=2'>My Profile</a></li>

</ul>
</div>

<div id="right">
       safsfsd
</div>








</body>
</html>

I want the content on the right hand side of the nav menu which is on the left hand side

Edited January 27, 2012 by modernmafiia

mixmaster · January 27, 2012

maybe use position ?

Djkanna · January 27, 2012

http://prntscr.com/5nq2n

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title></title>
 <meta name="description" content="">
 <meta name="author" content="">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <!--Inline whilst writing, makes it easier on me for this example-->
 <style>
   html, body {
     margin:0; padding:0;
     background: #e0e0e0;
   }

   body {
     width:1140px; /* General rule, 1140px seems to be a pretty decent size for most users, better if you take to responsive */
     margin: 0 auto;
   }

   #header {
     background: #c0c0c0;
     border:1px solid #bbb;
     height: 100px;
     margin-bottom:10px;
   }

   #content {
     width:830px;
     float: right;
     background: #c0c0c0;
     border: 1px solid #bbb;
     min-height:400px; /* added just for looks */
   }

   #menu {
     width:300px;
     float: left;
     background: #c0c0c0;
     border: 1px solid #bbb;
     min-height:400px; /* added just for looks */
   }

   #footer {
     clear: both;
   }
   #footer p {
     font-size:.8em;
     text-align: right;
   }
 </style>
</head>

<body>
 <div id="header">
   <!--Header Content-->
 </div><!--/#header-->

 <div id="content">
   <p>Some Content</p>
 </div><!--/#content-->

 <div id="menu">
   <p>Menu</p>
 </div><!--/#menu-->

 <div id="footer">
   <p>Footer</p>
 </div><!--/#footer-->


 <!--[if lt IE 7 ]>
   <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
   <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
 <![endif]-->

</body>
</html>

Play around, but I presume this is the sort of positioning you're after?

edit: Whoops, didn't see the responses (wasn't there when I began to write this) :P

At Octarine's post:

[CSS]

.clearfix:before, .clearfix:after { content: ""; display: table; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }

[/CSS]

Clearfix hack (taken from HTML5 Boilerplate)

Edited January 27, 2012 by Djkanna

modernmafiia · January 27, 2012

Octrine didnt work this made it worser the content bg did repeat was the same result and mixmaster can you help me im bad at css please post me the example for it

mixmaster · January 27, 2012

if i was you i would rather be asking help from octarine etc , take as screenshot of wat you are seeing

modernmafiia · January 27, 2012

http://imageshack.us/photo/my-images/821/freshox.png/ << thats how finishing should look and here is what i done so far http://www.mafiagangsters.com/shop/

Djkanna · January 27, 2012

Add another div in you <div id="contentt">, call it innerContent (or something).

in css for menu add float: left;

css for innerContent, add float: right;

Tweak till everything fits snug, add your content into the new <div id="innerContent"></div>

Edit, forgot to mention;

Css, for contentt, add either overflow:hidden;

or if not plausable, add the clearfix hack in the html (as shown above), to the contentt div and don't forget to apply widths. :)

Edited January 27, 2012 by Djkanna

modernmafiia · January 27, 2012

tried that DJ but the result it the contentt which is for the content image to repeat does not repeat only repeats when i add in more text and the nav menu is long so its not covering that.

Is it possible if you can actually code how it should be the content bg/menu/main content in html/css

lucky3809 · January 28, 2012

Why so complicated, just switch the css that you have for menu with content, and then update the width.

modernmafiia · January 28, 2012

That dont make sense if i do that my menu will repeat the bg image and content will be plain and wont be positioned please post an exmaple it will help

lucky3809 · January 29, 2012

after

add another div...

then instead of ...

safsfsd

</div>

replace it with...

<div>

Content

</div></div>

as for the css add(what the other site has for it)...

div#leftNavCont{

width:170px;

float:left;

display:inline;

padding-right: 5px;

padding-left: 5px;

margin-top: 0px;

margin-right: 27px;

margin-bottom: 0px;

margin-left: 0px;

background-color: #FFF;

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

}

You may need to mess around with the css and change it around to your likings.

Djkanna's solution would have worked for what you were wanting...

Sometimes all you need to do is grab the source code of that site you wanted it to look like and save it and upload it, then get the css and do the same thing, then go through the code and take out all the stuff you didnt want.. Not hard to do..

Edited January 29, 2012 by lucky3809

Need some css Help

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation