How do I center my logo in my Navigation bar? I kind of already have it centered, but the issue that I'm running into is when I place an image in the content area, the image covers up part of the logo. I do want the logo kind of dropped a little from the navigation links. I don't want a giant space between the logo and the content image. Is there a way I can achieve this? The image attached is the design I'm trying to accomplish. Thanks in advance!
body {
font-family:Georgia;
font-size:12pt;
}
* {
margin:0;
padding:0;
}
#header {
background-color:#000000;
height:100px;
margin:auto;
}
#header ul {
margin:0 auto;
width:35%;
padding:12px;
list-style: none;
}
#header li {
float: left;
}
#header a {
padding:0 14px;
text-align:center;
display:block;
text-decoration:none;
color:#FFFFFF;
font-size:18pt;
}
#header ul li a.logo {
background: url("Logo.png");
background-repeat:no-repeat;
height:140px;
display:block;
width:140px;
padding: 0;
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: "";
clear: both;
display: table;
}
#MainContent {
}
#MainContent img {
margin-top:-10px;
position:absolute;
left:0;
width:100%;
}
}
<body>
<div id="header" class="clearfix">
<ul class="Nav">
<li>Home</li>
<li>Menu</li>
<li></li>
<li><a href="gallery.html" >Gallery</a></li>
<li>About</li>
</ul>
</div>
<div id="MainContent">
<img src="Photos/drinks.jpeg">
</div>
</body>
You can add a z-index to your .logo class. This will render it above the image.
e.g.
.logo {
z-index: 100;
}
https://developer.mozilla.org/de/docs/Web/CSS/z-index
Related
I currently have a Header in my HTML which is a Unordered List with List Items display = inline. What I am try to accomplish is to spread each of the 5 items into an equaled space (20% Width for each) and step them centered in their respective spaces. I was able to accomplish this with a lot of ease on the Footer, but instead of List Items, I used Divs for each of the Options. Can anyone help me do the same with list? I can redo it as Divs, but I'd like to at least know how to make the list work.
How it should be
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
padding-top:10px;
}
#header .holder {
width:100%;
float:left;
}
#header a {
color:#ffffff;
font-size:11px;
font-weight: bold;
padding:0px 10px 0 0;
text-transform:uppercase;
}
#header li {
display:inline;
margin-left:-10px;
padding:0 4px 0 6px;
border-left: 1px solid #2F477A;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
I hope I was able to illustrate what I am trying to accomplish, but if it is still unclear please let me know. Thanks in advance for any help.
You can try like this ,I hope it will helps you.
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
}
#header .holder {
width:100%;
float:left;
}
#header ul {
display: table;
margin: 0;
padding: 0;
width: 100%;
}
#header a {
color: #ffffff;
display: inline-block;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
#header li {
display: table-cell;
padding: 5px 0;
position: relative;
text-align: center;
vertical-align: middle;
width: 20%;
}
#header li:after {
border-left: 1px solid #2f477a;
content: "";
height: 20px;
position: absolute;
right: 0;
top: 8px;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
ul {
display: flex;
}
#header li {
...
flex: 1;
display: flex;
align-items: center;
justify-content: center;
...
}
https://jsfiddle.net/234zzgn7/
Add this css. Ofcourse this is using flexbox which is something that I found to be extremely awesome. But you should investigate whether your users support it or not.
http://caniuse.com/#search=flexbox
Here try this. Changes are on #header li and #header a
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
padding-top:10px;
}
#header .holder {
width:100%;
float:left;
}
#header a {
color:#ffffff;
font-size:11px;
font-weight: bold;
padding:0px 10px 0 0;
text-transform:uppercase;
display:block;
width:100%;
box-sizing:border-box;
}
#header li {
display:inline-block;
box-sizing:border-box;
width:20%;
margin-left:-10px;
padding:0 4px 0 6px;
border-left: 1px solid #2F477A;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
I've created five different sections of images, displayed just as you can see in jsfiddle, the problem is that I can't control the margin of these imagesections. The thing is that I'm trying to add some space between section 1, 2, 3, 4 and 5, but whenever I add the margin the section just refuse to move.
I've tried to reset the float with the codes:
clear:both;
and
float: none;
but without success. The result of those codes is just that the section jumps to a new line.
The fiddle: https://jsfiddle.net/p0eaxkpz/
I found your problem, there is an error in your code: margin-left:0,5%; should be margin-left:0.5%;
Here is your updated jsfiddle
I have simply added margin: 0; padding: 0; to all elements, you can see it's working well. Basically, there is no need for you to wrap the images with <section> tags.
I also got a more modular aproach
#charset "UTF-8";
* {
margin: 0;
padding: 0;
}
body
{
background-color:black;
width:100%;
height:100%;
padding-bottom:20%;
}
#wrapper
{
width:80%;
height:1000px;
background-color:white;
margin:auto;
}
#headerloga
{
float:left;
width:20%;
height:20%;
font-family: "Gotham Medium";
font-weight:800;
font-size:40px;
padding-top:10%;
padding-left:10%;
}
#menu
{
float:left;
width:60%;
height:auto;
font-family:"Gotham Medium";
font-size:15px;
padding-top:17.5%;
padding-left:10%;
}
ul {
float: left;
width: auto;
padding: 0;
margin: 0;
list-style-type: none;
}
a {
float: left;
width: auto;
text-decoration: none;
color: black;
padding: 0.2em 0.6em;
}
a:hover {
color:#ED1C91;
}
li {
display: inline;
}
#imageshosting {
background-color:#CCC;
width:60%;
height:80%;
position:absolute;
clear:both;
top:40%;
left:18%;
}
.img-hosted {
display:block;
position:relative;
float:left;
height:49%;
margin:0.5%
}
.w33 {
width:32.33%;
}
.w66 {
width:65.66%;
}
.img-nextline {
clear: both;
}
#foot {
background-color:#666;
clear:both;
position:absolute;
top:120%;
left:18%;
width:60%;
height:10%;
}
<div id="wrapper"><!-- Webpage wrapper-->
<div id="headerloga">
Test
Test2
<section style="color:#ED178C; ">Test3 </section>
</div>
<div id="menu"><!--Menu-->
<ul>
<li>KUNDER</li>
<li>GAMLA FAVORITER</li>
<li>OM OSS</li>
<li>KONST</li>
<li>KONTAKT</li>
</ul>
</div><!-- End of menu-->
<!-- images starts-->
<div id="imageshosting">
<img class="img-hosted w33" src="images/testimage1.jpg"/>
<img class="img-hosted w33" src="images/testimage2.jpg"/>
<img class="img-hosted w33" src="images/testimage3.jpg"/>
<!-- New image line -->
<img class="img-hosted w66 img-nextline" src="images/testimage4.jpg"/>
<img class="img-hosted w33" src="images/testimage5.jpg"/>
</div><!--Imageshosting ends-->
<!--Footer here-->
<div id="foot">
<p>Hello</p>
</div>
</div><!-- End of webpage wrapper-->
I've just finished a CSS3 class and I want to use what I've learned on my website. I want a horizontal bar across the top of the page with two images and some text between them, centered in the page. The problem is that I can't seem to get the float:left to work on the <li> elements.
I'll be using the same technique to put a menu below this bar. This is just the beginning of this page and may not even be the best design, I'm just trying to use in the real world what I learned in class a step at a time.
I'm trying to stay away from using classes everywhere in the HTML code, that's a lot of trouble in maintenance and changing things.
See my website.
Here's the HTML:
<div>
<ul id="topBar" class="clearfix">
<li><img src="../../images/heinleinmedalgold-glow150.jpg" /></li>
<li id="logo">pixelmeow's pages</li>
<li><img src="../../images/heart_grenade.jpg" /></li>
</ul>
</div>
Here's the CSS:
#import url(reset.css);
.clearfix:before, .clearfix:after {
content:" ";
display:table;
}
.clearfix:after {
clear:both;
}
body {
width:100%;
}
#topBar {
width:100%;
height:10em;
background-color:black;
}
#topBar ul {
margin:0 auto;
}
#topBar ul li {
float:left;
list-style:none;
border:2px solid red;
height:5em;
display:inline-block;
}
#topBar ul li:first-child {
text-align:right;
}
#topBar ul li:nth-of-type(2) {
min-width:40%;
padding-top:5em;
text-align:center;
}
#topBar ul li:last-child {
text-align:left
}
#logo {
font-family:kells_uncialbold;
color:gray;
top: 50px;
}
Your selectors are incorrect. #topBar ul li should be #topBar li. What you have tries to select a <ul> that's a descendant of an element with the ID of topBar, when in reality it is the element with that ID. So you could use either #topBar li or ul#topBar li.
#import url(reset.css);
.clearfix:before, .clearfix:after {
content:" ";
display:table;
}
.clearfix:after {
clear:both;
}
body {
width:100%;
}
#topBar {
width:100%;
height:10em;
background-color:black;
}
#topBar {
margin:0 auto;
}
#topBar li {
float:left;
list-style:none;
border:2px solid red;
height:5em;
display:inline-block;
}
#topBar li:first-child {
text-align:right;
}
#topBar li:nth-of-type(2) {
min-width:40%;
padding-top:5em;
text-align:center;
}
#topBar li:last-child {
text-align:left
}
#logo {
font-family:kells_uncialbold;
color:gray;
top: 50px;
}
<div>
<ul id="topBar" class="clearfix">
<li><img src="http://pixelmeow.com/images/heinleinmedalgold-glow150.jpg" /></li>
<li id="logo">pixelmeow's pages</li>
<li><img src="http://pixelmeow.com/images/heart_grenade.jpg" /></li>
</ul>
</div>
It's probably worth mentioning that a list here is probably not the best choice for layout. Also, you might have trouble centering when using floats.
JSfiddle Demo
div#topbar {
text-align: center;
background-color: black;
color: white;
}
div#topbar img {
vertical-align: middle;
}
#logo {
display: inline-block;
vertical-align: middle;
}
<div id="topbar">
<img src="http://pixelmeow.com/images/heinleinmedalgold-glow150.jpg" />
<h1 id="logo">pixelmeow's pages</h1>
<img src="http://pixelmeow.com/images/heart_grenade.jpg" />
</div>
I took a break after doing a little bit and everything is fine. I come back to see my header has a gap between the top of the page and itself. I don't know why, I must of not saved or something, but I can't figure out what's wrong...
http://jsfiddle.net/Zevoxa/tCxaU/
HTML
<div id="header">
<img id="logo" src="/img/logo.png">
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
CSS
/*-- HEADER --*/
#header {
position:relative;
top:0px;
width:100%;
background-color:#2C2E31;
border-bottom:#242426 solid 2px;
}
img#logo {
display: block;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
}
#nav ul li {
list-style-type:none;
display:inline;
margin-bottom:0px;
padding-bottom:0px;
}
/*-- CONTENT --*/
body {
margin:0px;
padding:0px;
background-color:#2A2B2D;
}
Your issue is margin-top on the #logo.
One solution is to add that top 20px spacing as padding on the #header rather than a margin on the #logo.
http://jsfiddle.net/JRPwr/
/*-- HEADER --*/
#header {
position:relative;
top:0px;
width:100%;
background-color:#2C2E31;
border-bottom:#242426 solid 2px;
padding-top:20px;
}
img#logo {
display: block;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
}
#nav ul li {
list-style-type:none;
display:inline;
margin-bottom:0px;
padding-bottom:0px;
}
/*-- CONTENT --*/
body {
margin:0px;
padding:0px;
background-color:#2A2B2D;
}
Alternate solutions are mentioned in the following StackOverflow question:
Margin on child element moves parent element
In img#logo, use margin-top: 0px;
how do i make the center like the links are all off to the left i want them to be center top of the web page... any help?? i have done this before but i dont rember how
CSS:
body {
background: #B0FFF5
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left; /*supposed to be there */
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#3B5998;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#ffffff;
color:#3B5998;
}
HTML:
<body>
<ul>
<li>Home</li>
<li>Fb Fame</li>
<li>Donate</li>
<li>Facebook</li>
</ul>
</body>
If you want the buttons to line up, no matter what the window size is, set a fixed width and margin: 0 auto:
ul
{
width: 512px;
margin:0 auto;
}
Here is a demo.
Alternatively remove the whitespace between the list items (or use another technique), set their display to inline-block and give the container a text-align: center:
ul
{
margin:0;
text-align: center;
}
li
{
display: inline-block;
}
Here is a demo.
ul
{
list-style-type:none;
margin:0;
padding:0;
width: 400px;
margin: 0 auto;
}
Hope this helps.
ul
{
width:600px;
list-style-type: none;
margin-left:auto;
margin-right:auto;
padding:0;
}
i remberd how to do it sorry folks