Jump to content
MakeWebGames

Need some css Help


modernmafiia
 Share

Recommended Posts

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 by modernmafiia
Link to comment
Share on other sites

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 by Djkanna
Link to comment
Share on other sites

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 by Djkanna
Link to comment
Share on other sites

after

<div id="menu_side">

add another div...

<div id="leftNavCont">

then instead of ...

<div id="right">

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 by lucky3809
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...