I'm trying to make a navigation bar for my website, but the 'info' button will not stay inside the parent. Here is my HTML:
<div id="header">
<div id="homeB">
HOME
</div>
<div id="infoB">
INFO
</div>
</div>
<div id="main"></div>
And my CSS:
#header {
height:11%;
width:70%;
background:violet;
margin-left:15%;
}
#main {
height:100%;
width:70%;
background:blue;
margin-top:1%;
margin-left:15%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display:inline-block;
}
#homeB {
width:20%;
height:100%;
background:red;
}
#homeBTEXT {
display:block;
font-size:250%;
text-align:center;
text-decoration:none;
font-family:Impact, charcoal, sans-serif;
color:blue;
}
#infoB {
width:20%;
height:50px;
background:red;
float:right;
left:64.2%;
}
#infoBTEXT {
display:block;
font-size:250%;
text-align:center;
text-decoration:none;
font-family:Impact, charcoal, sans-serif;
color:blue;
}
Could someone clear up why this is not working?
Thanks, I'm not great at a lot of HTML and CSS elements, so any extra help would be appreciated too :)
Give float: left; to the #homeBTEXT and also clear the #header!
#homeBTEXT {
display:block;
font-size:250%;
text-align:center;
text-decoration:none;
font-family:Impact, charcoal, sans-serif;
color:blue;
float:left;
}
#header {overflow: hidden;}
Preview
Fiddle: http://jsbin.com/setipusabihu/1
Related
I have two classes, .growImage and .footer. When you hover over a div that contains the image, the image follow the following CSS...
.growImage:hover {
transform:scale(1.5,1.5);
transform-origin:0 0;
}
and it works... but below that CSS is this...
.growImage:hover ~ #footer {
height:1000px;
}
and it is supposed to enlarge the height of the footer as well but it doesn't. Please note I have tried converting both of them to ID'S (#example) and both of them to regular classes (.example), that didn't work. I tried add important! to the changing attribute, that also didn't work. The most confusing thing is, I started a new html webpage and made blank divs that contained nothing and minimal attributes and the code above worked on those so why isn't it working on the current webpage I am working on?
Here is the HTML...
<div class="growImage"><img src="images/familyTree.jpg" width="333px" height="250px"/></div>
<div class="footer">
This is the footer.</div>
Here is the CSS...
.footer{
height:50px;
width:960px;
font-size:16px;
text-align:center;
background-color:white;
color:black;
padding-top:27px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
}
.growImage:hover{
transform:scale(1.5,1.5);
transform-origin:0 0;
}
.growImage:hover ~ .footer {
height:1000px;
}
Sorry I should have included this before but this is the rest of the CSS...
#container{
height:920px;
width:960px;
background-color:#000;
margin:auto;
display: block;
float: none;
}
#header{
height:100px;
width:960px;
float:left;
background-color:white;
}
#navigation{
height:100px;
width:660px;
font-size:30px;
color:black;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
background-color:white;
}
#logo{
height:100px;
width:300px;
float:left;
background-color:white;
}
#body{
height:770px;
width:920px;
background-color:#0081c3;
color:white;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:20px;
padding-left:20px;
padding-right:20px;
padding-top:20px;
float:left;
}
#footer{
height:50px;
width:960px;
font-size:16px;
text-align:center;
background-color:white;
color:black;
padding-top:27px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
}
html{
/*background-color:#ffd636;*/
background-image:url(images/background.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
a:Link{
text-decoration:none;
}
a:visited{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
a:active{
text-decoration:bold;
}
img{
border-style: none;
}
.buttonBorder{
width:165px;
height:100px;
padding-top:31px;
color:white;
float:left;
border-left: 1px solid white;
box-sizing: border-box;
background-color:#ffd636;
}
.buttonSelected{
width:165px;
height:100px;
padding-top:31px;
color:white;
float:left;
border-left: 1px solid white;
box-sizing: border-box;
background-color:#ed3133;
}
.buttonBorder:hover{
color:#ffd636;
background-color:white;
}
td{
width:150px;
}
.growImage:hover{
transform:scale(1.5,1.5);
transform-origin:0 0;
}
.growImage:hover ~ .footer {
height:1000px;
}
I tried with both id and class . it doesn't shows any problem.
But you should implement like this because css scale is not the best idea because its will overlap siblings elements. try to use height: ( If u want to see full image when hovering )or set parent element overflow as hidden
Check here
#footer{
height:50px;
width:960px;
font-size:16px;
text-align:center;
background-color:white;
color:black;
padding-top:27px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
}
/* This rule added just for testing purpose only */
div#footer {
background:green;
transition-duration:.5s;
}
/* overflow avoid overflow of child elements when hovering */
#growImage{
overflow:hidden;
}
#growImage:hover img{
transform:scale(1.5,1.5);
transform-origin:0 0;
transition-duration:.5s;
}
#growImage:hover ~ #footer {
height:1000px;
}
<div id="growImage">
<img src="http://devgene.com/wp-content/themes/devgene/assets/img/tba-mobile.png" width="333px" height="250px"/>
</div>
<div id="footer">
This is the footer.</div>
I am trying to create a fixed horizontal navigation that stretches to the browser's width.The problem I am having is that the links in the navigation bar move when i resize the browser window. How can I make it so that when you resize the web browser, the links(Home, Services...) stay fixed to the right and vertically in-line with the #content.?
Here is my html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
</head>
<body>
<!--Navigation-->
<div id="fixed_bar">
<div id="navigation">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!--Content-->
<div id="content">
<!--Content-->
</div>
</body>
</html>
And my CSS:
body {
background-color:yellow;
color:black;
width:100%;
padding:0;
margin-left:auto;
margin-right:auto;
font-size:16px;
font-family:"Sans-Serif", Helvetica, Arial;
}
/*Navigation*/
#navigation {
background-color:green;
color:black;
width:100%;
height:60px;
margin:0;
padding:0;
position:fixed;
top:0;
z-index:99;
}
#navigation ul {
list-style:none;
display:inline-block;
margin:0;
padding:0;
float:right;
overflow:hidden;
}
#navigation ul li{
padding:10px;
float:left;
clear:right;
}
#navigation ul li a{
background-color:inherit;
color:black;
vertical-align:middle;
text-decoration:none;
text-transform:uppercase;
font-size:15px;
font-family:"Lato", sans-serif;
letter-spacing:1px;
line-height:40px;
clear:both;
}
/*Content*/
#content {
padding-top:50px;
margin:auto;
width:900px;
color:black;
background-color:white;
}
I have been trying to solve this for hours, help would be much appreciated
You can apply your actual #navigation CSS rules to your #fixed_bar div and give #navigation the same width of the content (900px), let the browser calculate the margins with automatic margins and align the text to the right, so the ul will be at the right of #navigation while you keep the background, etc in #fixed_bar.
See it here: http://jsbin.com/bibulewa/1
And this is the CSS I've modified:
#fixed_bar {
background-color:green;
color:black;
width:100%;
height:60px;
margin:0;
padding:0;
position:fixed;
top:0;
z-index:99;
}
#navigation {
width: 900px;
text-align: right;
margin: auto;
}
Not sure if this is what you're looking for
I gave the ul an absolute position and align to the right:2%.
A top margin of 5px.
Remove the float and display the list as inline-block
Here's a jsfiddle - http://jsfiddle.net/rezasan/kE7LK/
/*Navigation*/
#navigation {
background-color:green;
color:black;
width:100%;
height:60px;
margin:0;
padding:0;
position:fixed;
top:0;
z-index:99;
}
#navigation ul {
list-style:none;
position:absolute;
right:2%;
display:inline-block;
margin:5px;
padding:0;
overflow:hidden;
width:60%;
text-align:right;
}
#navigation ul li{
padding:5px;
display:inline-block;
}
#navigation ul li a{
background-color:inherit;
color:black;
vertical-align:middle;
text-decoration:none;
text-transform:uppercase;
font-size:15px;
font-family:"Lato", sans-serif;
letter-spacing:1px;
line-height:3px;
clear:both;
}
set navigation styling:
left:0;
right:0;
This is the HTML Can someone please help me? I can't remove the little margin above the navigation.
I've already tried padding:0px and margin-top:0px
<body>
<div id="wrap">
<div class="top_portion">
<img src="img/icbox.png">
</div>
<div id="welcome">
<h1>Welcome to my blog about the married life</h1>
<h3>Ain't much to see here for now!</h3>
</div>
<div id="navigation">
<ul>
<li><a href="#Home">Home</li>
<li><a href="#About">About</li>
<li><a href="#Pictures">Pictures</li>
</ul>
</div>
</div>
</body>
</html>
AND THIS IS THE CSS Sorry it's been a while since I've been back to this website
body {
background-color:white;
font-family: 'Josefin Slab', serif;
}
.top_portion {
width:800px;
height:200px;
background-color:#e2e2e2;
margin:auto;
text-align:center;
border-top:5px;
border-bottom:5px;
border-left:0px;
border-right:0px;
border-style:solid;
border-color:#30474b;
}
.top_portion img {
padding-top:35px;
}
#welcome h1 {
margin-top:0px;
text-align:center;
padding:0px;
margin-bottom:0px;
}
#welcome h3 {
margin-top:0px;
text-align:center;
}
#welcome {
font-family:sans-serif;
margin:auto;
background-color:#e2e2e2;
width:800px;
}
#navigation {
text-align:center;
}
#navigation li {
list-style-type:none;
display:inline;
}
ul {
margin-top:0;
}
ul a {
padding-right:20px;
text-decoration:none;
}
ul a:hover {
text-decoration:underline;
}
It is the h3
Margin:0; does the trick.. Where did you aply the margin:0; earlier?
h3 {margin:0;}
In your case you should change your #welcome h3 to:
#welcome h3 {
margin: 0;
}
DEMO
Try This:
I think its because of the default behavior of Heading.
Style:
html, body
{
padding: 0;
margin: 0;
}
#welcome h3 {
margin-top:0px;
margin-bottom:0px;
text-align: center;
}
/*Or you can try
#welcome h3 {
margin:0;
text-align: center;
}*/
Here is the Demo
I have changed these things in your query
#navigation {
text-align:center;
margin-top:0px;
}
#welcome h1 {
margin-top:0px;
text-align:center;
padding:0px;
margin-bottom:0px;
}
#welcome h3 {
margin-top:0px;
text-align:center;
margin-bottom:0px;
}
workingFiddle
Since you want to remove margin from the top for your navigation bar you could possibly try this:
#navigation {
margin-top: 0px;
border-top: 0px;
}
As, you are including list in your navigation it may eat up some of your space too. Try including this:
#navigation li {
margin-top: 0px;
}
Possibly, you can also try for:
#welcome h3 {
margin: 0px;
margin-bottom: 0px;
}
H3, because this would hold just the line above your navigation bar
I have a certain Header with my Logo and title. Just to the right of the Title Mobility group I want to create a nav bar that touches the bottom of the header with different tabs all the way to the right of the header. Messing around I was able to create something, but I can't seem to position it correctly.
http://jsfiddle.net/jHJK2/
http://jsfiddle.net/jHJK2/embedded/result/
I just can't figure out how to add this navigation bar to my header div.
HTML code:
<div id="page">
<div id="header">
<a href="http://wireless.fm.intel.com/test/index.php">
<img src="http://wireless.fm.intel.com/test/logo2.png" border=0 >
</a>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>
<div id="navigation">
About
Reports
Documents
Checklists
License Tools
Presentations
Software Releases
</div>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
CSS Code:
html, body {
padding:0;
margin:0;
height:100%;
}
#page {
min-height:100%;
position:relative;
height:100%;
}
#header {
background-color:#115EA2;
height:100px;
width:97.5;
}
#main {
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:90%;
height:auto;
height:89%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer {
position:fixed;
width:100%;
bottom:0;
height:35px;
background-color: #115EA2;
}
#header img {
float:left;
display:inline;
}
#header h2 {
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
font-family: Sans-serif;
float:left;
margin-top:20px;
margin-left:20px;
text-decoration:none;
}
#header h2, a, a:visited, a:hover, a:active {
color: #FFFFFF;
text-decoration: none;
}
Navigation Bar Code:
#navigation {
position:relative;
top:0;
left:0;
right:0;
bottom:0;
width:70%;
background-color:gray;
color:green;
height:35px;
text-align:center;
padding-top:15px;
}
#navigation a {
font-size:14px;
padding-left:15px;
padding-right:15px;
color:black;
text-decoration:none;
}
#navigation a:hover {
color:blue;
}
Update
Just wanted to say Thank you all for your help.
Adapting your current method to a more html5 approach, you can use header and nav tags do better markup your document. Absolute positioning also gives you better control over your elements. You would set the header to a relative position, and the nav to absolute, and offset it by the height of your header.
nav {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
min-width: 800px;
text-align: left;
height: 20px;
padding: 10px 20px;
}
Here is your updated fiddle
And here is an update with the nav to the right, a bit messy though:
http://jsfiddle.net/jHJK2/5/
Not 100% sure if this is how you want it since your request wasn't very clear, but here's what I made.
http://jsfiddle.net/jHJK2/2/
Changes:
HTML:
<div id="header">
<div id="navigation"> //moved this before the other elements
About
Reports
Documents
Checklists
License Tools
Presentations
Software Releases
</div>
<a href="http://wireless.fm.intel.com/test/index.php">
<img src="http://wireless.fm.intel.com/test/logo2.png" border=0>
</a>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>
</div>
CSS:
#navigation {
width:100%;
background-color:gray;
color:green;
height:35px;
text-align:center;
padding-top:15px;
}
#navigation a {
font-size:14px;
padding-left:15px;
padding-right:15px;
color:black;
text-decoration:none;
}
#navigation a:hover {
color:blue;
}
Make the following CSS changes:
Demo in jsFiddle
#header {
background-color:#115EA2;
height:100px;
width:97.5;
position: relative;
}
#navigation {
position:absolute;
/* top:0;
left:0;*/
right:0;
bottom:0;
width:70%;
background-color:gray;
color:green;
height:35px;
text-align:center;
padding-top:15px;
}
This is kinda embarrasing for me, since ive been working with CSS for such a long time for a living, that i would be considered an expert.
Yet! Experts also learn new things daily.
Well, my problem is, that this sample code with a full stretched Bg image is working fantastic in both Chrome and FF, it should work in IE too (atleast IE8) But i just cant get it to work, the image shows but the text wraps underneat the image like if the content box was not set to relative positioning.
I hope you can help me out.
<html>
<head>
<style> body, html {
margin:0px; padding:0px;
background-color:#fff;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
#spacer { height:20px; }
#content { width:900px; margin:0 auto; padding:10px; position:relative; }
#header { height:117px; }
#logo { float:left; width:101px; height:117px; }
#menu { float:left; height:50px; width:749px; margin-left:50px; margin-top:70px; }
#menu ul { list-style:none; margin:0px; padding:0px; }
#menu ul li { padding:0px; margin:0px; float:left; line-height:50px; padding-left:10px; margin-right:10px; }
h1 { margin:0px; padding:0px; color:#333333; font-size:16px; text-decoration:underline; margin-bottom:10px; }
#menu ul li a { color:#333; text-decoration:none; }
#lftmen { float:left; width:140px; margin-top:70px; }
#lftmen ul { margin:0px; padding:0px; list-style:none; }
#lftmen ul li { height:30px; background-image:url(img/lftbg.png); border:1px dashed #999; margin-bottom:10px; }
#lftmen ul li a { color:#fff; line-height:30px; text-decoration:none; margin-left:20px; font-size:14px; }
#lftmen ul li a:hover { color:#333; }
#midcont { line-height:16px; float:left; margin-top:60px; background-image:url(img/contbg.png); width:729px; margin-left:10px; font-size:12px; padding:10px; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<img src="img/bg.jpg" class="bg" />
<div id="content">
<div id="header">
<div id="logo"><img src="img/logo.png" /></div>
<div id="menu">
<ul>
<li>Opdatering: Zhoop rekrutere butikker i Aalborg</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
<div id="lftmen">
<ul>
<li>Forside</li>
<li>Se video</li>
<li>Udbyd tilbud</li>
<li>Information</li>
<li>Kontakt</li>
<li>Hent: android</li>
</ul>
</div>
Well first of all why would you use <img/> to define the page background pattern.
It is more suitable to define this kind of background directly in css.
e.g.:
body {
background: url(img/bg.jpg) 0 0 no-repeat;
...
}