HTML/CSS on making a website menu [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
First attempt on doing a website after a online course on HTML and CSS. I'm struggling with the horizontal menu.
I have three elements in the "header": img1; img2; ul/li elements
I want to make them stick together so i have a logo on the left, a triangule in the middle and the menu on the righ, all stick together, with no spaces beetween them and centered.
Can you help me out ?!
Here's the CSS:
* {
border: 1px solid white;
background-color:#000;
color: white;
}
#header {
border: 1px solid blue;
height: 60px;
}
#logo {
float: left
}
#logo img {
display:inline-block;
width: 300px;
height: 50px;
}
#triangulo {
display:inline-block;
}
#triangulo img {
display:inline-block;
width: 50px;
height: 50px;
}
#menu {
display:inline-block;
border: 1px solid pink;
float: right
}
#menu li {
display: inline-block;
text-color: white;
font-weight: bold;
font-family: Arial;
}
Thank you so much for the patience
edit: html
<div id="header">
<div id="logo"><img src="images/Olympic-logo.png" width=300 height=50 /></div>
<div id="triangulo"><img src="images/Triangle(shape).jpg" width=50 height=50 /></div>
<div id="menu">
<ul>
<li>Quem Somos</li>
<li>Soluções</li>
<li>Instalações</li>
<li>Contactos</li>
<li>X</li>
<li>X</li>
</ul>
</div>
</div>
edit2: fiddle link i want the 3 elements sticked toghther with no spaces between them and make it all the same row, with enough space to li/ul elements

Answer 1

Check thIS FIDDLE :DEMO
1) I have added a wrapper for the header and given it width and margin:auto , so that the menu is centered to the width (since you wanted the menu to be centered.)
2) and all the menu's are in a single line with equal spacing , this is done by applying display:inline-block;
HTML:
<div id="header-wrapper">
<div id="header">
<div id="logo"><img src="images/Olympic-logo.png" width=300 height=50 /></div>
<div id="triangulo"><img src="images/Triangle(shape).jpg" width=50 height=50 /></div>
<div id="menu">
<ul>
<li>Quem Somos</li>
<li>Soluções</li>
<li>Instalações</li>
<li>Contactos</li>
<li>X</li>
<li>X</li>
</ul>
</div>
</div>
</div>
CSS:
#header-wrapper{
width:800px;
margin:0 auto;
}
}
#header {
border: 1px solid blue;
height: 60px;
}
#logo {
display:inline-block;
}
#triangulo {
display:inline-block;
}
#menu {
display:inline-block;
border: 1px solid pink;
height: 50px;
width: 400px;
}
#menu li {
display: inline-block;
color: white;
font-weight: bold;
font-family: Arial;
}
Let me know if this is what you wanted.

Answer 2

There are many problem with your CSS Code. For example not wisely use float:left and float:right and second thing is there is no such property text-color: white; it should be color: white;.
Have a look at DEMO first . this is achieve by using display:inline-block;
CSS Code:
ul{margin:0; padding:0; vertical-align:top; list-style-type:none;}
#header {
white-space:nowrap;
border:1px solid #c6c6c6;
}
#logo {
display:inline-block;
}
#triangulo {
display:inline-block;
}
#menu {
display:inline-block;
border: 1px solid pink;
}
#menu ul li ,#menu ul li a
{
color: black;
font-weight: bold;
font-family: Arial;
display:inline-block;
text-decoration:none;
}

Answer 3

You need to float all of those inline divs left.
#header {
border: 1px solid blue;
height: 60px;
margin:0 auto 0 auto;
}
#logo {
float: left;
}
#triangulo {
display:inline-block;
float:left;
}
#menu {
display:inline-block;
border: 1px solid pink;
float:left;
height: 50px;
width: 400px;
}
#menu li {
display: inline-block;
color: white;
font-weight: bold;
font-family: Arial;
}

Answer 4

This should do it.
<style>
* {
border: 1px solid white;
background-color:#000;
color: white;
}
#header {
border: 1px solid blue;
height: 60px;
}
#logo {
display:inline-block;
padding:0px;
margin:0px;
width: 300px;
height: 50px;
float:left;
}
#triangulo {
display:inline-block;
width: 50px;
height: 50px;
padding:0px;
margin:0px;
float:left;
}
#menu {
display:inline-block;
border: 1px solid pink;
float:left;
}
#menu ul {
float:left;
padding:0px;
margin:0px
}
#menu li {
display: inline-block;
text-color: white;
font-weight: bold;
font-family: Arial;
}
</style>
<div id="header">
<img id="logo" src="images/Olympic-logo.png" width=300 height=50 />
<img id="triangulo" src="images/Triangle(shape).jpg" width=50 height=50 >
<div id="menu">
<ul>
<li>Quem Somos</li>
<li>Soluções</li>
<li>Instalações</li>
<li>Contactos</li>
<li>X</li>
<li>X</li>
</ul>
</div>
</div>