...

View Full Version : Div tag next to each other?



martynball
01-14-2010, 09:24 AM
I am trying to make a menu system which will use text for the links and have a background image. But I can't make the div tags align next to each other as they all can't use float:left/right as there are 6 links, so some will overlap. I also want them to align to the center of the page.

Here is my code, I did try to make the links using just <a href="#"></a> tags but that didnt work as I had to make the position absolute in order for the width and height to be used which makes the items overlap :(



<div class="topMenu">
<center>
<div class="menu">
<div class="menuItem">
<a href="#" class="menuLink">Home</a>
</div>
<div class="menuItem">
<a href="#" class="menuLink">About</a>
</div>
<div class="menuItem">
<a href="#" class="menuLink">Gallery</a>
</div>
<div class="menuItem">
<a href="#" class="menuLink">Downloads</a>
</div>
<div class="menuItem">
<a href="#" class="menuLink">Contact</a>
</div>
<div class="menuItem">
<a href="#" class="menuLink">Tutorials</a>
</div>
<!--
<a class="test" href="#">Home</a>
<a class="test" href="#">About Us</a>
-->
</div>
</center>
</div>


CSS


/*Top Menu*/
.topMenu {
width:100%;
background-color:#000000;
height:45px;
position:absolute;
z-index:1;
}
/*MENU*/
.menu {
margin-top:22px;
color:#CCCCCC;
}
.menuItem {
background-image:url(../images/buttons/inactive.png);
background-repeat:no-repeat;
width:115px;
height:35px;
padding-top:0.6em;
}
.menuItem:hover {
background-image:url(../images/buttons/active.png);
background-repeat:no-repeat;
}
.menuLink {
font-family:calibri;
color:#CCCCCC;
}
/*MENU END*/
/*Top Menu END

abduraooft
01-14-2010, 09:37 AM
Take a look at http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

PS: You've got divitis (http://csscreator.com/divitis)!

Excavator
01-14-2010, 10:02 AM
Hello martynball,
Lots of menu examples here (http://nopeople.com/design/CSS%20tips/index.html)to choose from.


Like ab says, you have divitis.
<center> is deprecated.
Your box model (http://www.w3.org/TR/CSS2/box.html)is off - You set .topMenu to 45px high, margin .menu down 22px and then put a 35px high .menuItem in it and add even more top padding to that. The math doesn't work out. The way the box model works, margin/padding/border all count when figuring total width or height.

martynball
01-14-2010, 10:24 AM
Cheers, got it sorted. And I have gotten rid of afew div's. I am still a noob at coding, so I try and code the way I know Lol. I used to use tables, then changed too CSS and liquid design.

Another thing, I want to have a bar along the top of the page, above the menu. But I can't seem to get the background image go in the middle and get the two images go at each side which give it curved corners.

E.g.

LeftImage | Middle section with background image | Right Image

Here is my code at the moment:


<body>
<div class="container">
<div class="topBar">
<img src="images/topBar/left.png"/>
<div style="background-color:#333333;">
<h1>Portfolio</h1>
<h2>Martyn Lee Ball</h2>
</div>
<img src="images/topBar/right.png"/>
</div>
<div class="topMenu">
<ul>
<li><a class="menuLink" href="#">Home</a></li>
<li><a class="menuLink" href="#">About</a></li>
<li><a class="menuLink" href="#">Gallery</a></li>
<li><a class="menuLink" href="#">Downloads</a></li>
<li><a class="menuLink" href="#">Contact</a></li>
<li><a class="menuLink" href="#">Tutorials</a></li>
</ul>
</div>
<div class="middleSection">

<div class="contentContainerBG">
</div>
<img src="images/middleSection/background/martynlball.png"/>
<img src="images/middleSection/background/bottomRight.png" style="right:0px; bottom:0px; position:absolute;">
</div>
<div class="bottomBar">
<div class="bottomBarC">
<div class="leftImage-bottom"/>
<img src="images/topBar/left-bottom.png" class="hidden" /></div>
<div class="rightImage-bottom"/>
<img src="images/topBar/right-bottom.png" class="hidden" />
</div>
</div>
</div>
</body>


CSS:


@charset "utf-8";
/* CSS Document */
body {
background-color:#242424;
margin:0;
}
h1, h2 {
color:#CCCCCC;
display:inline;
font-family:calibri;
font-size:13px;
padding:0px;
margin:0px;
}
h2 {
font-size:34px;
font-weight:normal;
letter-spacing:5px;
}
.container {
margin-top:8%;
}
a {
text-decoration:none;
}
/*Top Bar*/
.topBar {
z-index:1;
padding:0px;
margin-bottom:-9px;
}
.leftImage {
background-image:url(../images/topBar/left.png);
background-repeat:no-repeat;
float:left;
z-index:1;
}
.rightImage {
background-image:url(../images/topBar/right.png);
background-repeat:no-repeat;
float:right;
z-index:1;
}
/*Top Bar END */

/*Top Menu*/
.topMenu {
width:100%;
background-color:#000000;
height:45px;
position:absolute;
z-index:1;
}
/*MENU*/
.menu {
margin-top:22px;
color:#CCCCCC;
}
.menuItem {
background-image:url(../images/buttons/inactive.png);
background-repeat:no-repeat;
width:115px;
height:35px;
padding-top:0.6em;
}
.menuItem:hover {
background-image:url(../images/buttons/active.png);
background-repeat:no-repeat;
}
.menuLink {
font-family:calibri;
color:#CCCCCC;
display:block;
margin:0 0 0 1px;
padding:3px 10px;
text-decoration:none;
line-height:1.3em;
background-image:url(../images/buttons/inactive.png);
width:115px;
height:35px;
background-repeat:no-repeat;
}
.topMenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
.topMenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
.menuLink:hover {
background-image:url(../images/buttons/active.png);
}
/*MENU END*/
/*Top Menu END

/*Middle Section*/
.middleSection {
background-image:url(../images/middleSection/bg.gif);
background-repeat:repeat-x;
position:absolute;
height:430px;
width:100%;
margin-top:45px;
overflow:hidden;
}
.contentContainerBG {
position:absolute;
width:100%;
height:100%;
z-index:1;
background-color:#000000;
opacity:0.5;
filter: alpha(opacity = 50);
visibility:hidden;
}
/*Middle Section END*/

/*Special Classes*/
.hidden {
visibility:hidden;
}
/*Special Classes END*/

.test {
position:absolute;
width:100%;
background-image:url(../images/topBar/middle.gif);
}

abduraooft
01-14-2010, 10:39 AM
Here is my code at the moment: Can we have a link to your page?

martynball
01-14-2010, 10:45 AM
It is only local at the moment, I am doing it at college. Lesson has just this minute finished. I will upload later on if I have time.

martynball
01-14-2010, 11:13 AM
Here is the link, managed to get back onto a computer:

http://martynleeball.x10hosting.com/portfolio/index.php

Changed background colour, it is just temp. This monito on this computer is so dark I cannot make out the curved edges... can't get it any brighter, that means I am going to need change the colour scheme.

abduraooft
01-14-2010, 11:22 AM
Your document is not valid! Add a DOCTYPE (http://www.alistapart.com/articles/doctype) at the top first. I'd recommend
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> for your current markup. Then validate your markup (http://validator.w3.org/#validate_by_input) to fix the other remaining errors.

martynball
01-14-2010, 11:39 AM
I will fix the errors after I have got the main template complete. But cheers. :)

But:
I want to have a bar along the top of the page, above the menu. But I can't seem to get the background image go in the middle and get the two images go at each side which give it curved corners.

E.g.

LeftImage | Middle section with background image | Right Image



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum