Hey so first of all I'm terrible with HTML. Div confuses the hell out of me. Now what I am trying to do, I want these two boxes to be centered on the middle of the page with about 20px between them.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="FirstCSS.css">
<title>Services and Rates</title>
</head>
<body style="background-color:pink;">
<div id="top" align="center">
<header>
<h1 style="color:purple">Services and Rates</h1>
<nav>
<hr color="purple" width="80%">
<table style="color:purple">
<tr>
<td style="padding-right: 50px">Home</td>
<td style="padding-right: 50px">About Me</td>
<td style="padding-right: 50px">Photo Gallery</td>
<td><a href="mqservicesandrates.html">Services and Rates</td>
</tr>
</table>
<hr color="purple" width="80%">
</nav>
</div>
<div id="embroideryrates" class="centeredlistleft" >
<h3 style="color:purple" align="center"> Embroidery </h3>
<ul>
<li>Colored Towel (Non White)
<ul>
<li>$12</li>
</ul>
</li>
<li>White Towel
<ul>
<li>$8</li>
</ul>
</li>
</ul>
</div>
<div id="quiltingrates" class="centeredlistright">
<h3 style="color:purple" align="center"> Quilting </h3>
<ul>
<li>Custom Made Quilt
<ul>
<li>$400</li>
</ul>
</li>
<li>Batting
<ul>
<li>$75</li>
</ul>
</li>
<li> Lessons
<ul>
<li> $50/hour</li>
</ul>
</li>
</ul>
</div>
Right now the two boxes for Embroidery and Quilting are on the far left and right. I just cannot seem to get them centered. And here is my CSS.
#charset "utf-8";
/* CSS Document */
.centeredlistleft {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
float:left;
}
.centeredlistright {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
float:right;
}
.body{
margin: 0;
padding:0;
text-align: center;
color: purple;;
}
I'm pretty sure I'm way off here and over complicating things but again the Div tag has never made sense to me and I just cannot seem to get a handle on it.
This works. Put a wrapper division for the two lists
<div id="listswrapper" >
<div id="embroideryrates" class="centeredlistleft" >
<div id="quiltingrates" class="centeredlistright">
</div>
Then do the styling as follows:
#listswrapper {
width: 640px;
margin: 0 auto;
text-align: center;
}
.centeredlistleft {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
display: inline-block;
}
.centeredlistright {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
display: inline-block;
}
Some points noted:
The solution given by q0re does not work (though I am not the one to downvote :)) due to float:left in the centeredlistleft division. Rather, both the lists (divs) should be displayed as inline block.
The solution by SKV might work (I have not tested) due to align="center" but that is a deprecated way of styling.
The solution by Sindhu applies center styling to the whole body. this may not be desirable if you want to control per-division. Also the content div with width 400px is unclear as your two divisions have a combined with of 600px plus border and padding.
Very important:
may be you incorrectly copied, but please make sure your HTML is always well formed. I see a missing end-body tag. In general such minor mistakes can (do) lead to time-consuming bugs for beginners.
happy web developing!
check it out LINK
add some css
#listboxes {
width: 660px;
margin: 0 auto;
text-align: center;
}
.centeredlistleft {
margin-right:10px;
}
.centeredlistright {
margin-left:10px;
}
try this sample......
change your css with the below css....
.content {
width: 400px;
margin: 0 auto;
background-color:lavender;
}
.body{
margin: 0;
padding:0;
text-align: center;
color: purple;;
}
for demo :http://jsfiddle.net/ypwjY/
use below code for result requested.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="FirstCSS.css">
<title>Services and Rates</title>
<style>
#charset "utf-8";
/* CSS Document */
.centeredlistleft {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
float:left;
}
.centeredlistright {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
float:right;
}
.body{
margin: 0;
padding:0;
text-align: center;
color: purple;;
}
.outerdiv {
width:635px;
}
.outermost {
}
</style>
</head>
<body style="background-color:pink;">
<div id="top" align="center">
<header>
<h1 style="color:purple">Services and Rates</h1>
<nav>
<hr color="purple" width="80%">
<table style="color:purple">
<tr>
<td style="padding-right: 50px">Home</td>
<td style="padding-right: 50px">About Me</td>
<td style="padding-right: 50px">Photo Gallery</td>
<td><a href="mqservicesandrates.html">Services and Rates</td>
</tr>
</table>
<hr color="purple" width="80%">
</nav>
</div>
<div class="outermost" align="center">
<div class="outerdiv">
<div id="embroideryrates" class="centeredlistleft" >
<h3 style="color:purple" align="center"> Embroidery </h3>
<ul>
<li>Colored Towel (Non White)
<ul>
<li>$12</li>
</ul>
</li>
<li>White Towel
<ul>
<li>$8</li>
</ul>
</li>
</ul>
</div>
<div id="quiltingrates" class="centeredlistright">
<h3 style="color:purple" align="center"> Quilting </h3>
<ul>
<li>Custom Made Quilt
<ul>
<li>$400</li>
</ul>
</li>
<li>Batting
<ul>
<li>$75</li>
</ul>
</li>
<li> Lessons
<ul>
<li> $50/hour</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Related
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 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
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.
the first problem is that there is a gap between my banner and my nav bar even though I don't have anything seperating them
the next problem I have is that my nav bar should extend blue until the end of the page (or 970px in my case )but instead it only has blue for each li element
and thirdly the div tags don't seem to be doing their job right since when I expand my page I get the next div tag moving up to the right of this one.
my css code
#button {
padding: 3px;
}
#button li {
display: inline;
}
#button li a {
font-family: Arial;
font-size:14px;
text-decoration: none;
float:left;
padding: 10px;
background-color: #4169E1;
color: #fff;
}
#button li a:hover {
background-color: #E30800;
margin-top:-2px;
padding-bottom:12px;
}
and here is my html
<body leftmargin="50px" rightmargin="50px">
<img src="banner.jpg" width="970" height="120" />
<div>
<ul id="button">
<li>Home</li>
<li>Contact </li>
<li>Resumé</li>
<li>Help</li>
</ul>
</div>
<div>
<table width="970" cellpadding="5px">
<tr height="270">
<td width="700"><div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider"> <img src="demo/images/nemo.jpg" alt="" /> <img src="demo/images/up.jpg" alt="" title="#htmlcaption" /> <img src="demo/images/toystory.jpg" alt="" title="This is an example of a caption" /> <img src="demo/images/walle.jpg" alt="" /> </div>
</div>
<div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with a link. </div></td>
<td width = "270"><img src="demo/images/nahum-pachenik.jpg"></td>
</tr>
<table>
</div>
<hr color="#4169E1"/>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>
jsFiddle: http://jsfiddle.net/Hjc2e/
html,ul{
/*clear any default margin or padding, research css reset*/
/*this is how you get the <ul> to line up flush with your image*/
margin:0;
padding:0;
}
body{
/*width 100% for content and you can control you width with the left and right margins of body*/
margin-left:50px;
margin-right:50px;
}
#button li {
background-color: #4169E1;
float:left;
list-style-type:none;
text-align:center;
/*Must calculate width of menu based on width of list items in menu, 4 items thus 25%*/
width:25%;
height:40px;
/* so that text lines up vertically center padding-top is always half the height*/
padding-top:20px;
}
#button li a {
font-family: Arial;
font-size:14px;
text-decoration: none;
color: #fff;
}
#button li a:hover {
background-color: #E30800;
margin-top:-2px;
padding-bottom:5px;
}
<!--no need for div wrapper and it was adding gap between banner image and menu-->
<ul id="button">
<li>Home</li>
<li>Contact </li>
<li>Resumé</li>
<li>Help</li>
</ul>
<div>
<table width="970" cellpadding="5px">
<tr height="270">
<td width="700"><div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider"> <img src="demo/images/nemo.jpg" alt="" /> <img src="demo/images/up.jpg" alt="" title="#htmlcaption" /> <img src="demo/images/toystory.jpg" alt="" title="This is an example of a caption" /> <img src="demo/images/walle.jpg" alt="" /> </div>
</div>
<div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with a link. </div></td>
<td width = "270"><img src="demo/images/nahum-pachenik.jpg"></td>
</tr>
<table>
</div>
<hr color="#4169E1"/>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>
This is a common request. However, I'm going out of my mind.
<style type="text/css">
html, body { height: 100%; margin:0px; padding:0px; }
#content { margin-left: 50%; margin-right: 50%; width:900px; }
</style>
...
<body style="min-height:100%; height:100%; position:relative;">
<header style="min-height:200px;">
<div style="height:50px; background:url(http://www.mydomain.com/images/bg.gif) repeat-x;"> </div>
<div style="height:300px; background:url(http://www.mydomain.com/images/bg2.jpg) repeat;">
<div class="content" style="height:300px; background:url(http://www.mydomain.com/images/masthead-back.jpg) no-repeat;">
<img alt="Hello" src="http://www.mydomain.com/images/logo.png" />
Welcome.
</div>
</div>
<div id="nav">
<ul class="navs">
<li>Home</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</div>
</div>
</header>
<article class="content" style="padding-bottom:60px;">
This is the main content
</article>
<footer style="position:absolute; bottom:0px; width:100%; height:60px; background-color:black;">
<div class="content">
<a href='#'>Privacy</a> | <a href='#'>Terms of use</a>
</div>
</footer>
</body>
I want my header, artcle, and footer items to be centered within the body. But, I want the content within the header, article, and footer to be left-aligned. What am I doing wrong, everything is currently just left-aligned. However, its not centered within the screen.
You need a wrapper DIV with this CSS:
#wrapper { width:800px; margin: 0 auto; }
Working DEMO
Try:
div.content //or nav or just plain div
{
margin-left: auto; //centers the DIVs
margin-right:auto;
text-align: left;
}
You need to add in body
width:960px; margin: 0 auto;
you need to set article, header, and footer display style to block in your css to accomodate older browsers
also why not use <nav/> instead of <div id="nav">?
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block; }
<nav>
<ul class="navs">
<li>Home</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</nav>