Please check out this link quickly:
http://jsfiddle.net/8grSk/
As you can see the text as the bottom is aligned to the left side of the page
I want to add text to the right side of the page inline with the text already present.
How is this done?
I am finding it difficult to align all these divs!
Thanks guys!
James
You can easily rewrite everything to accommodate two regions (left and right) inside of your footer id like so:
HTML
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="footer" style="position:absolute;bottom:0;">
<div class="left">
About Us
Accessibility
Recruiters
Contact Us
</div>
<div class="right">
About Us
Accessibility
Recruiters
Contact Us
</div>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
}
#footer {
background: #FFFFFF;
border: 1px solid;
color: #e6e6e6;
height: 30px;
width: 960px;
position:absolute;
float: left;
margin: 0px 0px 0px 0px;
padding:0;
}
#footer a {
font: 13px helvetica;
color: #0040FF;
padding: 8px 12px 3px 3px;
}
#footer a:hover {
font: 13px helvetica;
color: #0040FF;
padding: 8px 3px 3px 3px;
text-decoration: underline;
}
.right {
float:right;
}
.left {
float:left;
}
demo
http://jsfiddle.net/8grSk/8/
-- edit
changed the fiddle to accommodate for your hover state better.
You should refactor the HTML. Instead if using divs, use an unordered list <ul>, then you can list your four links and float the <ul> left within the footer.
Then use another <ul> but this time float it right and voila, lined up links as you want them (I hope.)
<div class="footer1">
<ul id="footer-left">
<li id="footer1text">About Us</li>
<li id="footer1text">Accessibility</li>
<li id="footer1text">Recruiters</li>
<li id="footer1text">Contact Us</li>
</ul>
<ul id="footer-right">
<li id="footer1text">New Text</li>
</ul>
</div>
CSS
.footer {
background: #FFFFFF;
border: 1px solid;
color: #e6e6e6;
height: 30px;
width: 100%;
position:absolute;
margin: 0px 0px 0px 0px;
padding:0;
display: table;
}
.footer1 {
background: #FFFFFF;
height: 30px;
width: 350px;
position:absolute;
margin: 0px 0px 0px 0px;
padding:0;
}
#footer1text {
font: 13px helvetica;
color: #0040FF;
padding: 8px 3px 3px 3px;
display: table-cell;
}
#footer1text:hover {
font: 13px helvetica;
color: #0040FF;
padding: 8px 3px 3px 3px;
text-decoration: underline;
}
#footer-left li
{
float: left;
}
#footer-right li
{
float: right;
}
Working demo here :)
Related
<!DOCTYPE html>
<html>
<head></head>
<body>
<header class="header">
<h1 class="logo">Our Wedding</h1>
<ul class="main-nav">
<li>Our Story</li>
<li>Annoncements</li>
<li>Travel & Stay</li>
</ul>
</header>
</body>
</html>
body {
font-family: Arizonia;
line-height: 1.6;
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: #34495e;
text-decoration: none;
}
.logo {
margin: 0;
font-size: 1.45em;
text-align: center;
}
.main-nav {
margin-top: 5px;
}
.logo a,
.main-nav a {
padding: 10px 15px;
text-transform: uppercase;
display: block;
}
.main-nav a {
color: #34495e;
font-size: .99em;
}
.main-nav a:hover {
color: #718daa;
}
.header {
padding-top: .5em;
padding-bottom: .5em;
border: 1px solid #a2a2a2;
background-color: #f4f4f4;
-webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
how do I make the menu bar on the left side a drop down menu, so that with a click of a button the menu bar on the left side of the website will drop down how it displays now and clicking it a second time would suck up the tabs that are displaying now? Im not sure if that makes sense but I can try and re word what I want if people don't understand.
Do you want something like this?
HTML:
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<header class="header">
<h1 class="logo">Our Wedding</h1>
<ul class="main-nav">
<li>Our Story</li>
<li>Annoncements</li>
<li>Travel & Stay</li>
</ul>
</header>
<script>
$(document).ready(function() {
$(".logo").click(function () {
$(".main-nav").toggle();
})
});
</script>
</body>
</html>
CSS:
.main-nav {
margin-top: 5px;
display: none;
}
JavaScript
nav{
width: 100%;
height: 60px;
background: linear-gradient(to bottom, #fff, #bbb);
border-bottom: 1px solid #fff;
}
.wrapper{
max-width:1200px;
margin:0 auto;
}
li{
float:left;
width: 15%;
list-style: none;
margin-top: 5px;
}
a{
text-decoration: none;
box-sizing: border-box;
display: block;
padding: 10px 10px;
text-align: center;
color: #052537;
}
.nav01,
.nav03,
.nav05{
border-right: 1px solid #999999;
border-left: 1px solid #fff;
}
.nav02,
.nav04{
border-left: 1px solid #fff;
border-right: 1px solid #999999;
}
<nav>
<div class="wrapper">
<div class="nav-global">
<ul>
<li class="nav01">go1</li>
<li class="nav02">go2</li>
<li class="nav03">go3</li>
<li class="nav04">go4</li>
<li class="nav05">go5</li>
</ul>
</div>
</div>
</nav>
Nav bar
Hello, everyone, I have the problem to design the nav bar very first and the last border. I want to make borders like in the shared picture. I can't figure it out how to design nav01 first border and nav 05 last border because I want a combination of two borders as I did in nav02,nav03 and nav04. Please help me
One way is to use border and use different properties of border to get your desired result. You can experiment and be as creative as you can. Just for once, go through all the possibilities and what CSS is capable of. Then you can easily figure out which properties to combine to make your own prototype into code.
nav {
width: 100%;
background: #e4e4e4;
font-family: 'arial';
}
.navbar-ul a {
text-decoration: none;
list-style-type: none;
display: block;
float: left;
font-size: 20px;
width: 120px;
border: 1px solid #000;
text-align: center;
margin: 10px 0px;
border-left: none;
border-top: none;
border-bottom: none;
color: #1f1f1f;
}
ul a:last-child {
border-right: none;
}
li {
margin: 5px;
}
a:hover {
text-decoration: none !important;
}
li:hover {
margin: 5px;
background: #1f1f1f;
color: white;
text-decoration: none !important;
transition: all .2s;
border-radius: 4px;
}
.navbar-ul a:hover {
cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="clearfix">
<ul class="navbar-ul">
<a>
<li>Home</li>
</a>
<a>
<li>Profile</li>
</a>
<a>
<li>Contact</li>
</a>
<a>
<li>Blogs</li>
</a>
</ul>
</nav>
I am trying to put a header onto my website. I've tried numerous times I just cant jot down the correct way. When I put an image it wont fit into the size of the header(the rectangle where it says Younani Flower's). Why is this issue occuring? I have no left the area empty, because the image usually covers the page.
Website: http://younani.com/finalsite/finalindex.html
CSS:
#header {text-align: center;
}
#container {
width: 960px;
margin: 0 auto;
background-color: #FAFAFA;
color: #003300;
font-family: Arial, Helvetica, sans-serif; background-image:url('backgroundflower5.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;
}
#h2 {text-align: center;}
#container {
width: 960px;
margin: 0 auto;
}
#container div {
border: 1px solid;
}
#header {}
#center2 {
float: left;
margin: 10px 0 10px 20px;
min-width: 200px; width: 494px; border-radius:8px;
}
#centerO {float: left;
margin: 10px 0 10px 20px;
min-width: 200px; font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: left; }
#left,
#center,
#right {
float: left;
margin: 10px 0 10px 20px;
min-width: 200px;
}
#center {font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: center;
}
.clear {
clear: both;
}
#right2 {float: left;
margin: 10px 0 10px 20px; border: 0px;
min-width: 200px;}
#right { font-family: Impact, Charcoal, sans-serif; border-radius:8px; background-color: #FFFFFF;}
#left a {font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
display: block;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#ffffff 0%,
#2a07ed);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
to(#2a07ed));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 3px solid #ffffff;
-moz-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
-webkit-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
figure{}
#left a:link { background-color: #E6E6E6; }
#left a:visited { background-color: #E6E6E6; }
#left a:hover {border: 3px inset #333333; }
#left ul { list-style-type: none;
margin: 0;
padding-left: 0; }
#footer { text-align: center; font-family: Audimat;
clear: both; width:38%;
border-radius: 8px;
background-color:white;
text-align:center; margin-right:auto;
margin-left:auto; }
Homepage:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Younani Flower's</title>
<meta charset="utf-8">
<link rel="stylesheet" href="final.css" />
</head>
<body>
<div id="container" class="clearfix"><!-- Header -->
<div id="header">
<h1>Younani Flowers</h1>
</div>
<!-- Left Column -->
<div id="left">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Occasions</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<!-- Center Column -->
<div id="center">
<p><strong>In-store Specials</strong></p>
<p>Dozen Red Roses: $12.99</p>
<p>Bouquet of TEN different garden flowers: $19.99</p>
<p>Small glass vases: $9.99 <br /> Medium glass vases $14.99 <br /> Large glass vases: $19.99</p>
<p></p>
</div>
<!-- Right Column -->
<div id="right">
<p><span style="text-decoration: underline;"><strong>Birth Month Flowers<strong></strong></strong></span></p>
<p>January Carnation</p>
<p>February Iris</p>
<p>March Daffodil</p>
<p>April Daisy</p>
<p>May Lily</p>
<p>June Rose</p>
<p>July Delphinium</p>
<p>August Dahlia</p>
<p>September Aster</p>
<p>October Calendula</p>
<p>November Chrysanthe</p>
<p>December Poinsettia</p>
</div>
<!-- Footer -->
<div id="footer" class="clear">
<div class="nav"><b>Home Gallery Occasions About Us Contact Us </b></div>
</div>
</div>
<!-- #container -->
<p></p>
</body>
</html>
If you add the header background as follows it should work:
#header {
background-image: url(image_path);
}
If you remove the text inside, you will have to specify the dimensions of the header. Since the width is implicitly 100% for a block element, you'll only need to specify the height. In my browser the height with text is 81px.
Beginner page building question:
I've got a simple /div container defined via a CSS style called "content_bottom" like such:
border-top: 5pt solid #f4f4f4;
padding: 10pt;
border-collapse: separate;
text-align: left;
When I start typing text in it I noticed that the text starts touching the very left edge of the box. I tried to add padding and even borders (via the CSS style) to the container, but there was no effect. However, adding top/bottom borders DID have an effect. Why is this? What should I do so that the text would not start touching the very left (and top) of the box? Thanks.
P.S. This is the full HTML for the page:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>site title goes here</title>
<link rel="stylesheet" href="penonek.css" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="column_top">this <br>
</div>
<div class="content_top">is site title<br>
</div>
<div class="column_bottom">
<ul>
<li>home</li>
<li>link 1</li>
<li>link 2</li>
<li><a href="#">link 3<br>
</a></li>
</ul>
</div>
<div class="content_bottom">this is the container's content<br>
</div>
</div>
</body>
</html>
Here is the full CSS:
body {
margin: 0;
padding: 0;
text-align: center;
background-color: black;
font-family: Arial,Helvetica,sans-serif;
color: #cccccc;
font-size: 16pt;
}
.wrapper {
margin: auto;
min-width: 900pt;
font-family: Arial,Helvetica,sans-serif;
width: 900pt;
color: #cccccc;
}
.column_top {
border-width: 0 0 5pt;
border-bottom: 5pt solid black;
min-width: 150pt;
color: #333333;
width: 150pt;
max-width: 150pt;
background-color: #f4f4f4;
float: left;
min-height: 45pt;
max-height: 45pt;
height: 45pt;
padding-top: 105pt;
font-size: 40pt;
text-align: right;
font-weight: bold;
}
.content_top {
border-width: 0 0 5pt;
border-bottom: 5pt solid #f4f4f4;
height: 45pt;
min-height: 45pt;
max-height: 45pt;
padding-top: 105pt;
text-align: left;
font-size: 40pt;
font-weight: bold;
}
.column_bottom {
border-width: 5pt 0 0;
border-top: 5pt solid black;
color: #333333;
background-color: #f4f4f4;
width: 145pt;
min-width: 145pt;
max-width: 145pt;
text-align: right;
padding-top: 50pt;
padding-right: 5pt;
float: left;
}
.content_bottom {
border-top: 5pt solid #f4f4f4;
padding: 10pt;
border-collapse: separate;
text-align: left;
}
.column_bottom ul {
margin: 0;
padding: 0;
font-weight: inherit;
color: #333333;
list-style-type: none;
text-decoration: none;
}
.column_bottom a:hover {
background-color: #999999;
}
.column_bottom a {
text-decoration: none;
font-weight: inherit;
color: #333333;
}
Your html and css work so there must be a typo somewhere in your css file that causes it to be not used.
Everything is working as it should. Your problem is that the padding of the box is behind the left-floated nav-bar, your box is really 100% wide although part is hidden behind the bottom nav.
You can solve your problem by floating the .content_bottom container left as well.
You will need to make some additional changes for the borders, but you can do that in the top section so that you only have one horizontal border instead of 2 touching borders with the same colour.
See here for a working example.
padding: 5px;
or padding-top:5px; for just the top
10px Padding on all sides
padding:10px;
0px padding on top/bottom and 10px padding on right/left
padding:0px 10px;
for a combination of sides, you can do this
padding-right:10px;
padding-left:10px;
padding-top:10px;
padding-bottom:10px
You can also use the below shortcut to make top/bottom have different values while keeping right/left the same
padding: 20px 10px 30px;
Now you know everything their is to know about padding.
It sounds like you're experiencing collapsing borders. Try border-collapse:separate.
a mixture of border-collapse:separate and padding: 10px; should do the trick for ya. Post some code for a more detailed explanation.
I want to create a box shape and I am having trouble.
I want the box to have a background color, and then different color inside the box.
The box will then have a list of items using ul and li, and each list item will have a background of white, and the list item's background color is too stretch the entire distance of the inner box.
Also, the list items should have a 1 px spacing between each one, so that the background color of the inside box color is visible.
Here is a rough sketch of what I am trying to do:
You can do this pretty cleanly with this css:
.box {
width: 100px;
border: solid #884400;
border-width: 8px 3px 8px 3px;
background-color: #ccaa77;
}
.box ul {
margin: 0px;
padding: 0px;
padding-top: 50px; /* presuming the non-list header space at the top of
your box is desirable */
}
.box ul li {
margin: 0px 2px 2px 2px; /* reduce to 1px if you find the separation
sufficiently visible */
background-color: #ffffff;
list-style-type: none;
padding-left: 2px;
}
and this html:
<div class="box">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
</ul>
</div>
DEMO
So if you have source:
<div class="panel">
<div>Some other stuff</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
You can use CSS:
div.panel { background-color: #A74; border: solid 0.5em #520; width: 10em;
border-width: 0.75em 0.25em 0.75em 0.25em; }
div.panel div { padding: 2px; height: 4em; }
div.panel ul li { display: block; background-color: white;
margin: 2px; padding: 1px 4px 1px 4px; }
div.panel ul { margin: 0; padding-left: 0; }
To get the CSS to work properly (particularly on Internet Explorer), make sure you have an appropriate DOCTYPE definition in your document. See w3c recommended doctypes for a list.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Examples of margins, padding, and borders</TITLE>
<STYLE type="text/css">
UL {
background: yellow;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* No borders set */
}
LI {
color: white; /* text color is white */
background: blue; /* Content, padding will be blue */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* Note 0px padding right */
list-style: none /* no glyphs before a list item */
/* No borders set */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* sets border width on all sides */
border-color: lime;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>First element of list
<LI class="withborder">Second element of list is
a bit longer to illustrate wrapping.
</UL>
</BODY>
</HTML>
Maybe those two will help:
Listutorial
CssPlay Menus
Html:
<div id="content">
<a><div class="title">Title</div>Text</a>
<ul>
<li>Text</li>
<li>More Text...</li>
</ul>
</div>
CSS:
#content{
text-align:left;
width:200px;
background:#e0c784;
border-top:solid 10px #7f4200;
border-bottom:solid 10px #7f4200;
border-right:solid 5px #7f4200;
border-left:solid 5px #7f4200;
}
#content a{
margin-left:20px;
}
#content ul{
list-style-type:none;
margin-bottom:0px;
}
#content ul li{
padding-left:20px;
margin:0px 0px 1px -40px;
text-align:left;
width:180px;
list-style-type:none;
background-color:white;
}
#content .title{
text-align:center;
font-weight:bolder;
text-align:center;
font-size:20px;
border-bottom:solid 2px #ffcc99;
background:#996633;
color:#ffffff;
margin-bottom:20px;
}
Hope this helps.... I also added a title to it, if you dont like it just delete it...