So I added the current CDN files of Bootstrap to my code but when I did, the main navigation bar got all screwy.
Here is what the HTML looks like:
<header>
<div class="row">
<div class="logo">
<img src="img/whitestag.jpg">
</div>
<ul class="main-nav">
<li class "active">Home</li>
<li>About</li>
<li>Services</li>
<li>Story</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div class="hero">
<h1>Professional Full Stack Developer</h1>
<div class="button">
What Can I Do?
Completed Projects
</div>
</div>
</header>
AND here is what the CSS currently says:
.main-nav{
float:right;
list-style:none;
margin-top:55px;
margin-right:30px;
}
.main-nav li{
display: inline-block;
margin-left:30px;
}
.main-nav li a{
color:white;
text-decoration:none;
font-size:90%;
font-width:bold;
}
.main-nav li a:hover{
color:#e67e22;
border-bottom:2px #e67e22;
transition:all 0.5s ease-in;
padding:20px 0;
}
.logo img{
height:70px;
float:right;
margin-top:30px;
border-radius:12px;
}
BUT the end result still looks like this:enter image description here
Any help would be great! Totally new to this.
Related
I've been trying to create a navbar, but when I load my website in localhost, I can't seem to see my logo on the navbar. So I went searching on the web to get an example to see if my logo was the problem. In this first example ( took from the web I can see their logo loading)
*{transition:all 0.3s ease-in-out;}
.container{
clear:both;
overflow:auto;
}
nav{float:right;}
.logo img{float:left;}
ul li{
display: inline-block; padding:10px;
font-size:20px; font-family:raleway;
}
ul li:hover{
color:orange;
}
<div class="container">
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png" alt="" width="130"/>
</div>
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Products</li>
<li>Clients</li>
</ul>
</nav>
</div>
<hr />
Then all I did is put the direct link of my imgur image to replace their logo by mine and when I load it, it doesn't show up. How come?
*{transition:all 0.3s ease-in-out;}
.container{
clear:both;
overflow:auto;
}
nav{float:right;}
.logo img{float:left;}
ul li{
display: inline-block; padding:10px;
font-size:20px; font-family:raleway;
}
ul li:hover{
color:orange;
}
<div class="container">
<div class="logo">
<img src="https://i.imgur.com/jSo9sj9.png" alt="logo" width="130"/>
</div>
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Products</li>
<li>Clients</li>
</ul>
</nav>
</div>
<hr />
Thank you for your help.
I put it in the body element and got rid of the </hr> and it’s working for me.
It also works on jsfiddle.net.
I made my website as responsive as possible(don't wanna know something about bootstrap). The only thing that doesn't stay in its place (which needs to stay in the middle). Here is my code:
#header {
position:fixed;
display:block;
width:100%;
top:0;
left:0;
padding-left:0vmax;
padding-right:5vmax;
z-index:99999;
height:8vmax;
max-height:8vmax;
transition: .3s linear;
box-sizing:border-box;
background-color: rgba(243,243,243,1.00);
}
#menuwrapper {
display:block;
float:right;
width:55vmax;
margin-top:0.35vmax;
margin-right:17vmax;
height:8vmax;
max-height:8vmax;
overflow:hidden;
box-sizing:border-box;
position:relative;
}
#menu {position:absolute;height:100%;width:100%;display:table;padding: 2.5vmax; word-wrap:break-word;}
#menu ul {word-spacing:2vmax;font-size:1.35vmax;padding:0;padding-bottom:0vmax;margin: 0 1vmax;}
#menu li {display:inline-block;padding: 0vmax;}
.rechts {display: table-cell;width: 1px;vertical-align: middle;white-space: nowrap;}
#menu ul li a {height:8vmax;text-decoration:none;color:grey;transition: color .45s ease-in-out;margin-right:7.5vmax;}
#menu ul li a:hover {color:#3f92c3;}
<div id="header">
<div id="menuwrapper">
<div id="menu">
<ul class="pad">
</ul>
<ul class="rechts">
<li><a class="a1" id="page1" href="javascript:;">Services</a></li>
<li><a class="a1" id="page2" href="javascript:;">Portfolio</a></li>
<li><a class="a1" id="page3" href="javascript:;">Contact</a></li>
</ul>
</div>
</div>
</div>
I made a jsfiddle but i can't see that it goes to much to the left like i saw on a tablet.
It is a tablet of work and it has long height. On my website it's better noticable My website If i change the height inside the desktop version. Then you see that the menu goes left and the first menu word disappears.
Is there a way to fix this?
You're overriding default properties without reason.
I tried to clean your css code a little bit, deleting what's not necessary.
I think now works as you expect, if not, specify a little bit more and i'll edit the code to help you understand how to do what you need.
#header {
position:fixed;
display:block;
width:100%;
top:0;
left:0;
padding-left:0vmax;
padding-right:5vmax;
z-index:99999;
height:8vmax;
max-height:8vmax;
transition: .3s linear;
box-sizing:border-box;
background-color: rgba(243,243,243,1.00);
}
#menuwrapper {
display:block;
float:right;
margin-top:0.35vmax;
margin-right:17vmax;
height:8vmax;
max-height:8vmax;
overflow:hidden;
box-sizing:border-box;
position:relative;
}
#menu {padding: 2.5vmax; word-wrap:break-word;}
#menu ul {word-spacing:2vmax;font-size:1.35vmax;padding:0;padding-bottom:0vmax;margin: 0 1vmax;}
#menu li {display:inline-block;padding: 0vmax;}
.rechts {vertical-align: middle; white-space: nowrap;}
#menu ul li a {height:8vmax;text-decoration:none;color:grey;transition: color .45s ease-in-out;margin-right:7.5vmax;}
#menu ul li a:hover {color:#3f92c3;}
<div id="header">
<div id="menuwrapper">
<div id="menu">
<ul class="pad">
</ul>
<ul class="rechts">
<li><a class="a1" id="page1" href="javascript:;">Services</a></li>
<li><a class="a1" id="page2" href="javascript:;">Portfolio</a></li>
<li><a class="a1" id="page3" href="javascript:;">Contact</a></li>
</ul>
</div>
</div>
</div>
Im working on responsive code just now and for some reason i cant get 2 lists to display in the center of the div that's 100% width for mobile view. Is there something that im missing out in the css code below that might be causing this to not to display centered?
both lists have classes of .social-media and .top-nav
*** HTML ******
<div id="gezzamondo">
<div class="header">
<img class="logo" src="images/gezzamondo-logo.jpg" alt="Web designer Glasgow | Gezzamondo" title="Web designer Glasgow | Gezzamondo" />
<ul class="top-nav">
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
<ul class="social-media">
<li><img src="images/twitter-social.jpg" alt="Gezzamondo on Twitter" title-"Gezzamondo on Twitter"/></li>
<li><img src="images/behance-social.jpg" alt="Gezzamondo on Behance" title="Gezzamondo on Behance"/></li>
<li class="last"><img src="images/dribbble-social.jpg" alt="Gezzamondo on Dribbble" title="Gezzamondo on Dribbble"/></li>
</ul>
</div><!-- close header -->
</div><!-- close gezzamondo -->
** CSS ****
body {
background-color:#C09;
font-family: 'Ubuntu', sans-serif;
margin:0;
padding:0;
}
img{
max-width:100%:
}
#gezzamondo{
width:100%;
margin:0 auto;
}
.header{
background-color:#FFF;
height:215px;
width:100%;
text-align:center;
}
#gezzamondo .logo{
width:183px;
height:83px;
margin:0 auto;
margin-top:20px;
}
#gezzamondo .top-nav{
list-style: none;
font-size:20px;
font-weight:300;
margin:0 auto;
}
#gezzamondo ul.top-nav li{
float:left;
margin-right:30px;
}
#gezzamondo ul.top-nav li a{
text-decoration:none;
color:#333333;
}
#gezzamondo .social-media{
position: absolute;
list-style: none;
width:162px;
margin:0 auto;
background-color:#06F;
}
#gezzamondo .social-media li img{
height:44px;
width:44px;
}
#gezzamondo .social-media li{
float:left;
margin-right:15px;
}
#gezzamondo .social-media li.last{
float:left;
margin-right:0px;
}
#gezzamondo ul.top-nav li a:hover{
border-bottom:7px #FF0099 solid;
color:#333333;
}
you are setting the position to absolute in #gezzamondo .social-media, just remove the position and it should center.
I've used the code you supplied, it looks a mess to in jsfiddle (example code is not complete etc). I think this should do it for you, or at least get you closer. What I did was basically wrap the social ul in two divs. center-social spans the full width and center-s trys to provide an idea of a width so the uls can be centered. Try it out on your actual page and it should display correctly. It's only applied on the social ul in the example.
<div id="center-social">
<div id="center-s">
<ul class="social-media">
<li><img src="images/twitter-social.jpg" alt="Gezzamondo on Twitter" title-"Gezzamondo on Twitter"/></li>
<li><img src="images/behance-social.jpg" alt="Gezzamondo on Behance" title="Gezzamondo on Behance"/></li>
<li class="last"><img src="images/dribbble-social.jpg" alt="Gezzamondo on Dribbble" title="Gezzamondo on Dribbble"/></li>
</ul>
</div>
</div>
I have some code that has the property display-inline. Due to this it displays the list horizontally. Now, I placed an image in my code and it appeared after the list. I wanted the image to be displayed below the list so I placed the list into a div but still its getting displayed next to the list. Here is the code,
<ul id="list-nav">
<li>Home</li>
<li>About Book</li>
<li>Contact</li>
</ul>
</div><!--navigation div ends-->
<!--<div>-->
<img src="Book_Cover-465x540.png" />
CSS of list-nav:
ul#list-nav {
margin:40px;
padding:0;
list-style:none;
width:525px;
}
ul#list-nav li {
display:inline
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#000000;
color:#eee;
float:left;
}
ul#list-nav li a {
text-align:center;
border-left:15px solid #fff;
}
Please help out. Thanks
Remove the float from a.
Also: what the heck is border-left:15px solid #fff;, didn't you mean left margin?
try this:
<div>
<ul id="list-nav">
<li>Home</li>
<li>About Book</li>
<li>Contact</li>
</ul>
</div><!--navigation div ends-->
<!--<div>-->
<div style="clear:both"></div>
<img src="Book_Cover-465x540.png" />
I am having problems overlaping two boxes. Should I use absolute positioning? z-index or what techniques are out there? By the way I want them to overlap is just that I want to make sure it works cross modern browsers. IE8 or +
I cant push the black box to the center why?
<!DOCTYPE HTML>
<html>
<head>
<title>Metropolitan State Hospital Intranet</title>
<link rel="stylesheet" type="text/css" href="Home.css">
</head>
<body>
<div id="masthead">
<div id="logo">
Logo here
</div><!--end logo-->
<div id="header">
<div id="horizontalMainMenu">
<ul>
<li>About Us |</li>
<li>Contact Us |</li>
<li>Metro Link |</li>
<li>WaRMSS Login </li>
</ul>
<br style="clear:left;"><!--I used float:left in the css to stack the list items now I need to clear it-->
</div>
</div>
<!--end header-->
</div><!--end masthead-->
<div id="container">
<div id="left_col">
<div id="verticalMainMenu">
<ul>
<li>Air Quality Control</li>
<li>CalATERS</li>
<li>Email Encryption</li>
<li>Employee Guide</li>
<li>Patient Special Function Requests</li>
<li>Request Home Address <br> Confidentiality Form</li>
<li>Travel Store</li>
</ul>
</div><!--verticalMainMenu ends here-->
</div><!--left_col ends here-->
<div id="page_content">
<div id="horizontalBodyMenu">
<ul>
<li>Home</li>
<li>Clinical</li>
<li>Administrative</li>
<li>Service</li>
<li>Search</li>
</ul>
<br style="clear:left">
</div>
</div><!--page_content ends here-->
</div>
<div id="footer">
Footer
</div><!--end footer-->
</body>
</html>
CSS:
/* CSS layout */
*{
padding:0;
margin:0;
}
body {
margin: 0;
padding: 0;
}
#masthead {
min-width: 600px;
}
#logo {
float: left;
width: 200px;
background-color:yellow;/*I dont know what color this is in the template*/
}
#header {
background-color:yellow;/*I dont know what color this is in the template*/
height:300px;
}
#container {
clear: both;
min-width: 600px;
}
#left_col {
float: left;
width: 200px;
background-color:red; /*I dont know what color this is in the template*/
}
#page_content {
background-color:black;
margin:-50px 0 0 0;
width:95%;
}
#footer {
clear: both;
}
/* CSS common layout ends here*/
/* horizontalMainMenu starts here*/
#horizontalMainMenu{
width:100%;
background-color:transparent;
}
#horizontalMainMenu ul{
margin:0;
padding:0;
float:left;
}
#horizontalMainMenu ul li{
display:inline;
}
#horizontalMainMenu ul li a{
float:left;
text-decoration:none;
color:white;
padding:5px 9px;
}
/*horizontalMainMenu ends here*/
/*Body Menu Starts here*/
#horizontalBodyMenu ul{
list-style:none;
}
#horizontalBodyMenu ul li{
display:inline;
}
/* horizontalBodyMenu ends here*/
#horizontalMainMenu ul li a:visited{
color:white;
}
#horizontalMainMenu ul li a:hover,#mainMenu ul li .current{
color:#fff;
background-color:#0b75b2;
}
#verticalMainMenu ul{
margin:0;
padding:0;
list-style:none;/*removes the default bulltets*/
}
#verticalMainMenu li{
padding:0 0 0 10px;
background-image:url('');
background-repeat:no-repeat;
background-position:.5em;
line-height:200%;
}
#verticalMainMenu li a:hover{
color:#fff;
background-color:#0b75b2;
}
You should do it normally, and then pull "Box 2" upwards with margin-top: -80px.
This will work in "all browsers".
Here's a good article concerning negative margins:
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
You need to position box2 relative to box1. Lookup html relative positioning.
http://www.barelyfitz.com/screencast/html-training/css/positioning/