hello guys i want to display html content in with margin on the sides with 50px &50px .
here is the problem my nav bar witdh is et to 100% then it elongates to right end but correctly positioned on left
i have given the image below:like this
i show the html& css
css:
<style>
.top{
width:100%;
height:300px;
color:#ccc;
font-size: 40px;
text-align: center;
background-color: forestgreen;
}
.align{
height:100%;
margin-left: 50px;
margin-right: 50px;
background-color: darkgray;
}
ul{
position: absolute;
width:100%;
list-style-type: none;
overflow: hidden;
background-color: black;
color: azure;
float:left;
padding: 0;
}
nav{
position: inherit;
}
li{
text-decoration: none;
padding: 14px 16px;
display: block;
float: left;
margin: none;
text-align: center;
}
li.active{
background-color: darkred;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
</style>
HTML:
<body class="bg-danger">
<div class="align bg-success" >
<div id=image-header class=top>
NO:1 Hosting Site
</div>
<nav >
<ul>
<a href="index.php"><li class="active">
Home
</li></a>
<a href="login.php"><li>
Login
</li></a>
<a href="registration.php"><li>
Register
</li></a>
<a href="account.php"><li >
Profile
</li></a>
</ul>
</nav>
</div>
</body>
i want it to fix it like this (i used 92.5% in width)with 100% width this is just model like affix in bootstrap
and want to know why it cant be fixed with 100% in div element
image
You can use width: calc(100% - 100px); on that navbar to get the correct width.
Related
I'm trying to add code to my site's body but the header just keeps going down whenever I put anything with margin-top, even having ended it.
Already tried to move the header to after the div logo and after the menu. It seems to work better when its after menu. When I had margin-top in #barra, it moves the whole header alongside with it. Already tried everything I remember. Plus, before I close the header, it seems to be alright, but after I close it, it gets all messed up. I suspect it has to do with the menu. Hope you can help me. Thanks.
Header structure
Fiddle
Code:
HTML
<header id="header" class="fluid ">
<div id="mail"></div>
<div id="logo"> </div>
<!-- Menu -->
<div id="menu">
</ul>
</div>
</header>
<!-- Corpo parte 1 -->
<div id="barra"></div>
CSS
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
#header {
margin-top: 0px;
background-image: url(Imagens/Headercontact.jpg);
height: 21px;
}
#logo {
width: 220px;
height: 210px;
margin-left: 162px;
margin-top: 0px;
background-image: url(Imagens/logo2.png);
position: fixed;
}
#menu {
margin-left: 320px;
margin-top: 190px;
}
#menu li {
display: block;
float: left;
margin-left: 57px;
}
#menu a li {
text-decoration: none;
color: black;
font-size: 18px;
font-family: Georgia;
width: 65px;
height: 29px;
display: block;
text-align: center;
}
#barra {
background-image: url(Imagens/semi.jpg);
height: 3px;
margin-top: 15px;
}
Apologies in advance if I misunderstand the issue you're trying to solve, but have you tried:
header {
position: absolute;
top: 0;
left: 0;
}
Delete the float: left in your .fluid rule and set your "#menu" margin-top: 0px; and it jumps back up ... an update of your fiddle
Further more, your menu's ul element look like this
<ul>
<li>Home</li>
which is really wrong, as it should look like this
<ul>
<li>Home</li>
So I recommend to do some clean up work and get elements correct coded, as these issues can cause very unpredictable results.
The divs are not stacking correctly in your page because some floated elements are not being properly clearfixed, causing the divs to float in into each other (in this case, your header and some inner elements). To fix this, I removed the float: left property from your .fluid class and wrapped your floated header elements inside a .clearfix class so they remain in a row.
CSS
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
line-height: 0;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
}
.fluid {
clear: both;
margin-left: 0;
width: 100%;
display: block;
}
#header {
margin-top: 0px;
background-image: url(https://i.imgur.com/1ijUhkZ.jpg);
height: 21px;
}
#mailtext {
margin-left: 450px;
float: left;
font-family: "Adobe Devanagari";
color: #FFFFFF;
font-weight: bold;
font-size: 18px;
}
#teltext {
margin-left: 40px;
font-family: "Adobe Devanagari";
font-weight: bold;
font-size: 18px;
float:left;
color: #FFFFFF;
position:absolute
}
#logo {
width: 220px;
height: 210px;
margin-left: 162px;
margin-top: 2px;
background-image: url(https://i.imgur.com/6u97lQ7.png);
position: fixed;
}
#menu {
margin-left: 320px;
margin-top: 190px;
}
#menu li{
display:block;
float:left;
margin-left:57px;
}
#menu a li{
text-decoration:none;
color: black;
font-size: 18px;
font-family: Georgia;
width: 65px;
height: 29px;
display:block;
text-align:center;
}
#menu a li:hover{
background-image: url(https://i.imgur.com/IH2Zg9N.png);
width: 65px;
height: 29px;
display:block;
color: white;
}
#barra {
background-image: url(http://i.imgur.com/S7Qt9Mn.jpg);
margin-top: 190px;
height:30px;
}
HTML
<!-- Cabeçalho e logo -->
<header id="header" class="fluid">
<div class="clearfix">
<div id="mail"></div>
<span id="mailtext"> Email: hotelsolemar#grupofbarata.com</span>
<div id="tel"></div>
<span id="teltext">Tel: (+351) 289 580 080</span>
<div id="logo"> </div>
</div>
<!-- Menu -->
<div id="menu">
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Serviços</li>
</a>
<a href="#">
<li>Galeria</li>
</a>
<a href="#">
<li>Notícias</li>
</a>
<a href="#">
<li>Sobre</li>
</a>
<a href="#">
<li>Contato</li>
</a>
</ul>
</div>
</header>
<!-- Corpo parte 1 -->
<div id="barra"></div>
Demo: https://jsfiddle.net/8bbfyds3/4/
I am trying to capture a layout that I have seen a few different places. The layout has a fixed header with an image centered, and then a horizontal UL that is split around the logo. Attached is the image that I feel represents this.
I need a suggestion to achieve splitting the UL around logo. Right now the UL is always under and not split.
http://jsfiddle.net/jgac8/1/
Here is some markup that I have been attempting:
HTML
<header>
<h1 id="logo"></h1>
<nav>
<ul>
<li>about</li>
<li>services</li>
<li>location</li>
<li>contact</li>
</ul>
</nav>
</header>
CSS
header {
width: 100%;
height: 150px;
text-align:center;
position: fixed;
top: 0;
left: 0;
background:#FF7D0D;
border-bottom: 1px solid #CCC;
z-index:100;
}
#logo {
display: inline-block;
padding:5px 0 0 0;
width: 80px;
height: 150px;
background: url(../img/PP_Logo_Vert_White.png) center no-repeat;
}
nav {
padding: 0px;
margin: 0px;
font-size:16px;
font-weight: 100;
clear:left;
}
nav ul {
padding: 0px;
margin: 0px;
list-style: none;
}
nav li {
display: inline-block;
padding: 0 50px;
}
You might have to do a bit of tweaking but I believe it is what you want.
HTML
<header>
<h1 id="logo"></h1>
<nav id="left">
<a href="#" ></a>
<ul>
<li>about</li>
<li>services</li>
</ul>
</nav>
<nav id="right">
<a href="#" ></a>
<ul>
<li>about</li>
<li>services</li>
</ul>
</nav>
</header>
CSS
header {
width: 100%;
height: 150px;
text-align:center;
position: fixed;
top: 0;
left: 0;
background:#FF7D0D;
border-bottom: 1px solid #CCC;
z-index:100;
}
#logo {
display: inline-block;
padding:5px 0 0 0;
width: 80px;
height: 150px;
background: url(http://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png) center no-repeat;
}
#left{position:absolute; left:10%; top:5px; list-style:none}
#right{position:absolute; right:10%; top:5px; list-style:none}
li{list-style:none}
There are many ways to go about this. Depending on how dynamic your site will be. If you are creating it with static html and css I would simply create a container, put three divs inside the container splitting it up how you want. In the first and third div create two separate menus. In the center put the logo. Something like the code below. At a certain width you can create some css media queries to bring it down and make it one navigation.
The very basic idea:
Example of html:
<div class="container">
<div class="left-nav">
</div>
<div class="logo">
</div>
<div class="right-nav">
</div>
</div>
Example CSS:
.container {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
.left-nav {
float: left;
width: 400px;
}
.right-nav {
float: left;
width: 400px;
}
.logo {
float: left;
width: 200px;
}
I am having trouble getting my menu items to align next to my logo, within my navbar. My menu items are appearing just below my logo and to the right, the horizontal position is correct, I need to adjust the vertical position up so that the items are in line and within the navigation bar.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Serving Grace - Home</title>
<!-- Stylesheet -->
<link href="Private/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="content">
<nav id="nav">
<ul>
<li><img src="Logo/logo.png"/></li>
<li>Home</li>
<li>About</li>
<li>Volunteer</li>
<li>Donate</li>
<ul>
</nav>
<div id="image">
<img src="Images/Content.png"/>
</div>
<div id="info">
<img src="Images/info.png"/>
</div>
<div id="footer">
<img src="Images/Facebook.fw.png">
<img src="Images/Twitter.fw.png">
<img src="Images/Google.fw.png">
<p id="copyright">© 2013 Jeffery Evans</p>
</div>
</div>
</body>
</html>
CSS
body {
background-color: #C8C8C8;
}
#content {
width: 1090px;
height: 900px;
background-color: white;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 3px 5px #888;
min-height: 100%;
position: relative;
}
#nav {
background-color: #222222;
height: 100px;
border: 1px solid black;
}
#nav li {
text-decoration: none;
display: inline;
margin: 25px 20px 10px 10px;
font-family: Arial;
color: #F59239;
position: relative;
}
#nav li a {
text-decoration: none;
color: #F59239;
font-family: Arial;
font-size: 18px;
}
#logo {
padding-right: 300px;
position: inline-block;
}
#nav li a:hover {
color: #222222;
}
#image {
top: 100px;
position: relative;
float: left;
left: 15px;
}
#info {
top: 100px;
position: relative;
float: left;
left: 30px;
}
#footer {
display: table-cell;
width: 1090px;
height: 70px;
background-color: #222222;
bottom: 0;
position: absolute;
}
#footer a {
margin-left: 15px;
}
#copyright {
color: white;
text-align: center;
vertical-align: middle;
}
instead of
#nav {
height: 100px;
}
try something like
#nav {
line-height: 100px;
}
if that doesn't work, then also try using line-height for your nav li and/or nav a
THE EASIEST WAY would be to do something just like this
#logo {
padding-top: 10px;
}
That will just push the logo down by 10px , adjust accordingly
If the logo.png is very wide, it may be pushing the menu items to the next line. I tried your code a with small gif for the logo and it worked fine (image and menu text were aligned at bottom) in both Firefox and Chrome.
I'm trying to vertically stretch my vertical side banners to the bottom of the page, and make the footer in the bottom left be in the bottom center. I've been looking for a solution to this issue, but am unable to find it as of yet. I am doing this for a school assignment, and thus, am still in the learning process. Please explain what needs to be done to fix this too if you can. Thanks!
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="headers_t">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240" />
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
</span>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers_t{
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
margin: 0px;
padding-top: 191px;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h, img{
display: block;
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
This is what the problem in the site looks like:
Image of Problem http://i.tinyuploads.com/cwPP9R.jpg
Jokan welcome! Its typical for front end questions like this to be mocked up on a site like jsfiddle.com, that way other users can easily see what your talking about and help you find a solution.
If I understood you correctly, heres your solution in a fiddle. You just want the banner to be the height of the browser window right?
I just set the height of .banner_h to 100% like so:
.banner_h {height:100%;}
#footer {width:100%; text-align: center;}
This may help you, ammend your following css style to-
.banner_l{
float: left;
border:thin solid #000;
width:200px;
position:fixed;
height:auto;
min-height:380px;
margin-top:-20px;
}
.banner_r{
float: right;
border:thin solid #000;
margin-top:-20px;
width:200px;
min-height:380px;
height:auto;
}
#footer {
width:100%;
height:30px;
background:#090;
float:left;
position:fixed;
padding:5px;
bottom:0px;
text-align:center;
}
change position style to relative or absolute as u need.
I'm trying to align divs with different widths in a footer on the website so it goes like this:
But when I tried to do it, all I saw was blank space. The footer totally disappeared.
Here is the HTML code:
<div class="footer" >
<div class="disclamer">
<h3>Tite</h3>
<hr>
<p>Paragraph of text</p>
</div>
<div class="footerlogo">
<img src="images/logo_footer.png" alt="Footer Logo" align="center" />
</div>
<div class="footerlinks">
<h3>Links</h3>
<hr>
<div id="parentlink">
<div class="link1">
<ul>
<li>▶   Link</li>
<li>▶   Link</li>
</ul>
</div>
<div class="link2">
<ul>
<li>▶   Link</li>
<li>▶   Link</li>
</ul>
</div>
</div>
</div>
<div class="copyright">
<p class="copy">© Copyright</p>
</div>
</div>
And CSS
/* Footer */
.footer{
height:211px;
width: 1200px;
position:fixed;
background-image: url('../images/footer.png');
background-repeat:no-repeat;
display: inline-block;
overflow:hidden;
}
.disclamer{
display: inline-block;
width:29%;
height:50px;
font-size: 12px !important;
color: white;
padding: 40px;
padding-top: -20px;
}
.disclamer hr{
width: 250px;
margin-bottom: 10px;
}
.footerlogo{
display: inline-block;
width:22%;
height:250px;
margin-top: -30px;
}
.footerlinks{
display: inline-block;
margin:0 auto;
height:50px;
width:32%;
color: white;
padding: 40px;
font-size: 12px !important;
}
.footerlinks a{
color: white;
text-decoration: none;
}
.footerlinks a:hover{
text-decoration: underline;
}
.footerlinks hr{
width: 250px;
margin-bottom: 10px;
}
#parentlink{
display: inline;
width: 350px;
}
.link1{
width: 129px;
}
.link2{
position: relative;
display: inline;
margin-left: 130px;
padding-right: -30px;
}
.copyright{
width: 1200px !important;
font-size: 12px !important;
}
Also I noticed, i have a container in which is nested another div which contains all other divs. I use the container to display a background, but for some reason when it comes to the footer, the background stops showing. I have the repeat-y for it, and its height is like 2000px. What could be the problem?
At the very least, when using position:fixed you need to specify what that fixed position is.
For example, to force this to the bottom of the window (fixed is relative to the window, not the page content):
.footer{
bottom: 0;
left: 0;
height:211px;
/* etc. */
}