You are viewing our Forum Archives. To view or take place in current topics click here.
simple Html/CSS Div question...
Posted:

simple Html/CSS Div question...Posted:

TTGTRAMMELL
  • New Member
Status: Offline
Joined: Nov 17, 201112Year Member
Posts: 39
Reputation Power: 1
Status: Offline
Joined: Nov 17, 201112Year Member
Posts: 39
Reputation Power: 1
I am trying to place an image(logo) above a menu on a website.
but when I change the browser size, the image and the menu bar are not vertically aligned.
The image either moves too far over, or the menu bar does. I want them equally equivalent.

A better example of what I am trying to do is like on The tech Game where the TTG logo is aligned with the menu bar, even when you make the browser smaller.
#2. Posted:
Kyle93
  • Winter 2021
Status: Offline
Joined: Jun 25, 201013Year Member
Posts: 4,078
Reputation Power: 2628
Motto: https://www.thetechgame.com/Forums/t=7804 333/vote-for-tune-of-the-week-friday-nigh ts-lockdown-dj-sets.html
Motto: https://www.thetechgame.com/Forums/t=7804 333/vote-for-tune-of-the-week-friday-nigh ts-lockdown-dj-sets.html
Status: Offline
Joined: Jun 25, 201013Year Member
Posts: 4,078
Reputation Power: 2628
Motto: https://www.thetechgame.com/Forums/t=7804 333/vote-for-tune-of-the-week-friday-nigh ts-lockdown-dj-sets.html
Show us your code and an example of the problem you are having, without seeing all of your code then it is all just guess work. But I would check your open and close DIV's and make sure they are in the correct place to keep content in the correct location.
#3. Posted:
TTGTRAMMELL
  • New Member
Status: Offline
Joined: Nov 17, 201112Year Member
Posts: 39
Reputation Power: 1
Status: Offline
Joined: Nov 17, 201112Year Member
Posts: 39
Reputation Power: 1
I do not have really and code to show you.

I was thinking about putting another div around the 2 divs for the photo & menu so that it stay aligned together when the browser is resized.
I was just trying to get it working by messing around with stuff, currently trying something like this..

HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>

<title>title</title>

<link rel='stylesheet' type='text/css' href="css/layout.css" media="all" />

</head>


<body bgcolor = "#FFFFFF">
<div id="header"><img src="images/logo.png" alt="" />

<ul>





<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='Forums.html'><span>Forums</span></a></li>
<li class='has-sub'><a href='Downloads.html'><span>Downloads</span></a></li>
<li class='has-sub'><a href='Guides.html'><span>Guides</span></a></li>
<li class='has-sub'><a href='submit.html'><span>Submit</span></a></li>
<li class='has-sub'><a href='Contact.html'><span>Contact</span></a></li>
<li class='has-sub'><a href='Help.html'><span>Help</span></a>
   <ul>
<li><a href='About.html'><span>About</span></a></li>
<li class='last'><a href='#'><span>Location</span></a></li>
   </ul>
</li>   
   
 
   
</ul>
</div>
</body>


</html>




CSS:

@charset "UTF-8";
/* Styles */

#header {
   
}

#header img {
   clear:left;
   float:left;
   margin:0 auto;
   padding:0;
   position:fixed;
   top: 0; left: 30%; bottom: 5; right: 5;
 
}

#header ul {
      clear:left;
      float:left;
      margin:0 auto;
    padding:0;
   position:fixed;
    top: 30%; left:50%; bottom: 5; right: 5;
}
#header ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#header ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#ddd;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}
#4. Posted:
MD5
  • Rising Star
Status: Offline
Joined: Jan 26, 201113Year Member
Posts: 705
Reputation Power: 31
Status: Offline
Joined: Jan 26, 201113Year Member
Posts: 705
Reputation Power: 31

If you still need help with this, send me a PM and I'll be able to help you.



-MD5

Jump to:
You are viewing our Forum Archives. To view or take place in current topics click here.