I am fairly new to web development and I have been trying to create a site, so far I have managed to do a navigation menu and a logo. My issue is that after thoroughly trying many tutorials and posts I have been unable to resolve my issue.
I want to align my logo with my navbar so that the logo is on the left hand side and the navbar is in line with the logo but on the right hand side, with both of them next to each other.
next questions is how to create a drop down menu for some of navbar tabs?
thankyou
My html is as follows
<!DOCTYPE html>
<html>
<head>
<title>S3ntry Aust Transport</title>
<link href="navbarlog.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="Layout1" style="overflow: auto; ">
<header>
<div id="menu">
<img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571"
height="176" id="logo"></a>
</div>
</header>
<ul>
<li><a id="nav-index" class="first" href="%E2%80%9D#%E2%80%9D">Home</a></li>
<li><a id="nav-aboutus" href="%E2%80%9D#%E2%80%9D">About Us</a></li>
<li><a id="nav-ourservices" href="%E2%80%9D#%E2%80%9D">Our Services</a></li>
<li><a id="nav-environment" href="%E2%80%9D#%E2%80%9D">Environment</a></li>
<li><a id="nav-latestnews" href="#">Latest News</a></li>
<li><a id="nav-contactus" class="last" href="%E2%80%9D#%E2%80%9D">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
and the css part is as follows
ul {list-style-type:none; margin:0 auto; width:640px; padding:0; overflow:hidden;}li
{float:left;}
ul li a {display:block; text-decoration:none; text-align:center; padding:22px 20px 22px
20px;font-family:Arial; font-size:8pt; font-weight:bold; color:#000000; text-
transform:uppercase; border-right:1px solid #607987; background-color:#FFFFFF; text-
transform:uppercase; letter-spacing:.08em}
ul li a:hover {background-color:#3b6a85; color:#a2becf}
ul li a.first {border-left:0}
ul li a.last {border-right:0}}
#header ul li {
list-style: none;
display:inline-block;
float:right
}
logo.JPG
{
vertical-align:middle;
float:left
}
If you were to restructure your HTML, moving your 'ul' into the header, it's very easy.
<header>
<div id="logo">
<img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571" height="176" id="logo">
</div>
<div id="menu">
<ul>
<li><a id="nav-index" class="first" href="%E2%80%9D#%E2%80%9D">Home</a></li>
<li><a id="nav-aboutus" href="%E2%80%9D#%E2%80%9D">About Us</a></li>
<li><a id="nav-ourservices" href="%E2%80%9D#%E2%80%9D">Our Services</a></li>
<li><a id="nav-environment" href="%E2%80%9D#%E2%80%9D">Environment</a></li>
<li><a id="nav-latestnews" href="#">Latest News</a></li>
<li><a id="nav-contactus" class="last" href="%E2%80%9D#%E2%80%9D">Contact Us</a></li>
</ul>
</div>
</header>
and the CSS needed
header { width: 700px; }
#logo { float: left; }
#menu { float: right; }
#menu ul { padding: 0; margin: 0; }
Here is a JSFiddle showing it working: http://jsfiddle.net/STu89/
I've also removed a which wasn't opened and stripped out various /div which weren't matched.
Related
The content from my html document is overlapping my navbar.
I have tried to add margins to my .main-nav in css but it did not work.
The example code has "Hello World" on top of my nav bar. I want to have a new section that starts right below the main navbar without using
.main-nav{
float:right;
list-style: none;
margin-top: 25px;
margin-bottom: 50px;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
.section-test{
margin-top: 200px;
}
<body>
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section class="section-test">
<h3>hello world</h3>
</section>
</body>
use clear:both; on section-test class
/* Styles go here */
.main-nav{
float:right;
list-style: none;
margin-top: 25px;
margin-bottom: 50px;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
.section-test{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section class="section-test">
<h3>hello world</h3>
</section>
</body>
</html>
As you are using float: right on your nav element, it is out of the flow. What that means is that the nav parent doesn't takes it's height into account.
You have multiple solutions here. The first one is to apply an overflow:hidden to the nav element to force it to grow, to use a clear element as mentioned by Punith Jain, or simplify your markup and get rid of the floating with the usage of flexbox!
.row {
display: flex;
}
.main-nav{
text-align: right;
flex: 1;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section>
<h3>hello world</h3>
</section>
First of all, I´m not very firm with CSS. I try to show an icon (right side) on my sidebar link (nav-first-level) on mouseover. The Sidebar-Link currently uses 100% of the Sidebar. Do you have a tip for me?
<ul>
<li class="nav-first-level">
<a class="facetGroup" href="#">Cardiology<span class="fa arrow"></span></a>
<span class="markGroup "><i class="fa fa-pencil fa-2" ></i></span>
<ul class="nav nav-second-level collapse">
<li ng-repeat="facet in cardiologyItems">
<span>{{ facet.name }}</span>
</li>
</ul>
</li>
</ul>
this should get you there, take a look (show image icon on rollover with CSS).
• Swap .image class with your .facetGroup > remove <span> use a <div> and swap demo .play class with your .markGroup. Basically follow how it's done below and customize with your selectors!
<div class="itemsContainer">
<div class="image"> <img src="http://www.itsalif.info/blogfiles/video-play/vthumb.jpg" /> </div>
<div class="play"><img src="http://cdn1.iconfinder.com/data/icons/flavour/button_play_blue.png" /> </div>
</div>
CSS:
.itemsContainer {
background:red;
float:left;
position:relative
}
.itemsContainer:hover .play{display:block}
.play{
position : absolute;
display:none;
top:20%;
width:40px;
margin:0 auto; left:0px;
right:0px;
z-index:100
}
Use li:hover property.Try this:
<html>
<body>
<style>
ul li ul li:hover {
list-style-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-16.png');
}
ul li ul li
{
list-style-type: none;
}
</style>
<ul>
<li>Cardiology
<ul>
<li>citem1</li>
<li>citem2</li>
<li>citem3</li>
</ul>
</li>
<li>Other
<ul>
<li>oitem1</li>
<li>oitem2</li>
<li>oitem3</li>
</ul>
</li>
</ul>
</body>
</html>
Working JSFiddle sample: https://jsfiddle.net/t41w9u2w/2/
For each list item, I want an image with text below the image.
I read on this technique, but it is not supported in IE. Instead, I'm floating the list items to the left. It does the trick except the content below the list wraps to the right. How do I prevent the content from wrapping this way?
Here is my code:
<style>
.horizlist{
list-style:none;
text-align:center;
}
#menulist ul{
width:360px;
}
#menulist li{
float:left;
padding-right:50px;
}
#menulist li img{
display:block;
}
</style>
<div id="container" style="">
<div id="top">
<img src="joblove.jpg" style="float:right;">
<div id="title" style="width:500px;text-align:center;">
<h1>"THE TOUGHEST JOB YOU'LL EVER LOVE:"</h1>
<p style="font-size: 1.6em;">A RESOURCE FOR THOSE THINKING ABOUT A CAREER IN DIRECT CARE</p>
</div>
</div>
<div id="menulist">
<ul class="horizlist" >
<li>
<img src="images/purplestyle_11_home.png"></img><span>Home</span>
</li>
<li>
<img src="images/purplestyle_01_heart.png"><span>Brochure</span>
</li>
<li>
<img src="images/purplestyle_05_cut.png"><span>Video</span>
</li>
<li>
<img src="images/purplestyle_15_buddies.png"><span>Personality</span>
</li>
<li>
<img src="images/purplestyle_03_folder.png"><span>Resources</span>
</li>
<li>
<img src="images/purplestyle_02_talk.png"><span>FAQ</span>
</li>
</ul>
</div>
<img src="phone.jpg">
<ul class="horizlist">
<li><button type="button">Click </li>
<li></li>
</ul>
</div>
Add an height to #menulist in css :
#menulist ul{
width:360px;
height:100px;
}
Use CSS backgrounds. They give you more control over image positioning and require less mark-up.
HTML:
<a class="home" href="home">Home</a>
CSS:
.horizlist a {
display:block;
background-repeat:no-repeat;
padding-top: 20px;
padding-left: 20px
background-position: 10px 10px;
a.home {
background-image:url(/images/purplestyle_11_home.png);
}
Can can adjust the padding and background-position values to suit. Repeat as needed.
I'm trying to get the text (Home, About Us, Cheese) etc to display to the right of the social media icons, so that the base of the text is aligned with the base of the icons and they appear on the same line.
How do I do this?
My code is in fiddle here http://jsfiddle.net/pnX3d/
<div class="grid_5" id="social_icons">
<img src="img/facebook.png" alt="Click to visit us on Facebook">
<img src="img/twitter.png" alt="Click to visit us on Twitter">
<img src="img/pinterest.png" alt="Click to visit us on Pininterest">
<img src="img/email.png" title="Click to contact us" alt="Contact us">
</div>
<nav class="topmenu omega">
<ul>
<li>Home |</li>
<li>About Us |</li>
<li>Cheeses</li>
</ul>
</nav>
I have achieved that with the following code:
.container-header{
line-height: 1.22;
}
#social_icons {
padding: .5em;
display: inline-block;
}
.topmenu li {
display:inline-block;
font-size: 1.5em;
text-align: right;
}
.topmenu.omega{
float:right;
}
ul{
margin: 0;
}
li>a
{
font-size: 20px;
}
<div class="container-header">
<div class="grid_5" id="social_icons">
<img src="img/facebook.png" alt="Facebook">
<img src="img/twitter.png" alt="Twitter">
<img src="img/pinterest.png" alt="Pininterest">
<img src="img/email.png" title="Click to contact us" alt="Contact us">
</div>
<nav class="topmenu omega">
<ul>
<li>Home |</li>
<li>About Us |</li>
<li>Cheeses</li>
</ul>
</nav>
</div>
Add float: left to #social_icons and .topmenu li.
Here's a demo: http://jsfiddle.net/ZsJbJ/.
Hope that helps!
These changes in your CSS should do the trick:
#social_icons {
padding: .5em;
line-height: 1.22;
float:left;
vertical-align:bottom;
}
.topmenu li {
display:inline-block;
font-size: 1.5em;
text-align: right;
line-height: 1.22;
float:left;
vertical-align:bottom;
}
Float the .topmenu to right and #social_icons to the left. Give padding-left:0; for the ul and give display:inline-block for .topmenu. Please check it in fiddle
http://jsfiddle.net/pnX3d/10/
Thanks for your input, but I actually ended up using the following. As this isn't a production site and I'm only experimenting I wanted to use flex columns. The below actually reduces the code required as well.
HTML
<div id="social_icons">
<img src="img/facebook.png" alt="Click to visit us on Facebook">
<img src="img/twitter.png" alt="Click to visit us on Twitter">
<img src="img/pinterest.png" alt="Click to visit us on Pininterest">
<img src="img/email.png" title="Click to contact us" alt="Contact us">
<nav class="topmenu omega">
<ul>
<li>Home |</li>
<li>About Us |</li>
<li>Cheeses</li>
</ul>
</nav>
</div>
CSS
#social_icons {
padding: .5em;
line-height: 2.7;
-webkit-columns: 150px 2;
font-size: 1.2em;
}
.topmenu li {
display:inline-block;
}
I have been trying unsuccessfully to create a drop down menu for my navbar, every single CSS method doesnt seem to provide the desired effect that I require. Currently my HTML looks like....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>
</head>
<!-- Reset Sheet -->
<link href="reset.css" rel="stylesheet" type="text/css">
<!-- Main Sheet -->
<link href="main.css" rel="stylesheet" type="text/css">
<!-- Navigation Menu Sheet -->
<link href="navbar.css" rel="stylesheet" type="text/css">
<body>
<table id="header">
<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0">
<!-- Table containing logo -->
<tr>
<td colspan="2" valign="middle" height="30" align="center">
<img src="logo.JPG" alt="logo" width="570" >
</td></tr>
<!-- Table containing NavBar -->
<tr>
<td colspan="2" valign="middle" height="55" bgcolor="#300000" align="center">
<div class="navbar">
<ul class="horizontal">
<li><a class="first" href="#">Home</a></li>
<li>About Us</li>
<li>Our Products</li>
<li>Environment</li>
<li>Latest News</li>
<li><a class="last" href="#">Contact Us</a></li>
</ul>
</div>
</td></tr>
</table>
</body>
</html>
And to compliment that my CSS for the navbar looks like...
.navbar ul.horizontal
{
list-style-type:none;
margin:40 auto;
width:640px;
padding:0;
overflow:hidden;
}
.navbar ul.horizontal > li
{
float:left;
}
.navbar ul.horizontal li a
{
display: block;
text-decoration:none;
text-align:center;
padding:22px 20px 22px 20px;
font-family:Arial;
font-size:8pt;
font-weight:bold;
color:#FFFFFF;
text-transform:uppercase;
border-right:1px solid #607987;
background-color:#300000;
letter-spacing:.08em
}
.navbar ul.horizontal li a:hover
{
background-color:#680000;
color:#a2becf
}
.navbar ul.horizontal li a.first
{
border-left:0
}
.navbar ul.horizontal li a.last
{
border-right:0
}
My question to the point is if I was to make this menu a drop down menu for the "The products" button following a similar style pattern (such as hover colours and background colours) to the rest of the navbar. how would I go about with CSS to achieve this.
The new HTML for the css in question being...
<div class="navbar">
<ul class="horizontal">
<li><a class="first" href="#">Home</a></li>
<li>About Us</li>
<li>Our Products</li>
<ul>
<li>Apple</li>
<li>HTC</li>
<li>Nokia</li>
<li>Samsung</li>
</ul>
<li>Environment</li>
<li>Latest News</li>
<li><a class="last" href="#">Contact Us</a></li>
</ul>
</div>
I have tried with so many attempts but have failed to achieve a proper result. Your help will be greatly appreciated. Thanks
I am not quite sure if this is what you mean, maybe it needs some style adjustment.
The thing is that your submenu list should be inside the list item of the main menu. Like this:
<ul>
<li>Item
<ul>
<li>...</li>
</ul>
</li>
</ul>
Using that in your code (and optimized the CSS), this is what I came up with:
HTML
<div class="navbar">
<ul class="horizontal">
<li>Home</li>
<li>About Us</li>
<li>Our Products
<ul>
<li>Apple</li>
<li>HTC</li>
<li>Nokia</li>
<li>Samsung</li>
</ul>
</li>
<li>Environment</li>
<li>Latest News</li>
<li>Contact Us</li>
</ul>
</div>
CSS:
.horizontal {
list-style-type:none;
margin:40 auto;
width:640px;
padding:0;
overflow:hidden;
}
.horizontal > li {
float:left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: block;
}
.horizontal li a {
display: block;
text-decoration:none;
text-align:center;
padding:22px 10px;
font-family:Arial;
font-size:8pt;
font-weight:bold;
color:#FFFFFF;
text-transform:uppercase;
border-right:1px solid #607987;
background-color:#300000;
letter-spacing:.08em
}
.horizontal li a:hover {
background-color:#680000;
color:#a2becf
}
.horizontal li:first-child a { border-left:0; }
.horizontal li:last-child a { border-right:0; }
Like said, you may need to change some of the styles!
Also check the working JSFiddle Demo