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
Related
I was wondering if anyone could help me with an issue I'm having. I wanted the text "Liam's Digital Portfolio" to be in the centre of the webpage at the top in line with the navigation bar text. In addition, I then wanted the navigation bar to be on the far right hand corner as shown within the codepen link http://codepen.io/ldocherty1/pen/qRowVK.
I have only started programming and this is my second day and really want to improve, apologies if the code is not in the correct structure.
Below is my HTML code, within the codepen is my CSS if needed.
<div id="Navagationbar">
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
<li><b><center>Liam's Digital Portfolio<center></b></li>
</ul>
</div>
</body>
</html>
Thanks,
Liam.
I wish you all the best with your coding journey :) I will give you an easy solution to get the desired effect. First off, cut the padding-top from the body in the css:
padding-top: 180px;
Now from your html, remove
<li><b><center>Liam's Digital Portfolio<center></b></li>
Since this is your page title, it is standard practice to have it inside of h1 tags. Then we can center it with simple css. The html will look like this:
<h1 class="title">Liam's Digital Portfolio</h1>
<div id="Navagationbar">
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
</ul>
</div>
And now we can simply add this to the css
.title{text-align:center;}
With the padding-top removed and this added, the title will be in the center of the page inline with the navigation bar. I see you have a lot of issues with your css so I suggest you go through a good tutorial, like this one from w3schools http://www.w3schools.com/css/ . I hope this helps, and good luck!
Make the HTML changes as below
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
<li style="position:absolute;right:45%"><b>Liam's Digital Portfolio</b></li>
</ul>
CSS changes as below
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
h1 {
font-family:Arial;
color:white;
font-size:10pt;
text-align:center;
}
li a:hover:not(.active) {
background-color:grey;
}
#Navagationbar {
font-family:Arial;
color:white;
font-size:10pt;
text-align:center;
}
#Navagationbar ul {
list-style:none;
float:right;
margin:0;
padding:0;
}
#Navagationbar ul li {
display:block;
list-style:none;
margin:0;
padding:0;
}
#Navagationbar ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
color:white;;
text-decoration:none;
line-height:1.3em;
}
#Navagationbar ul li a:hover {
color:white;
}
#Navagationbar ul li a.active,
#Navagationbar ul li a.active:hover {
color:white;
}
body {
margin:0;
}
.page{
min-height:-590px;
background:linear-gradient(45deg, #999, #FFF);
}
#footer{
list-style:none inside none;
margin:0;
padding:0;
position:fixed;
right:0;
bottom:0;
left:0;
height:50px;
background-color:#1f1f1f;
font-size:0;
}
#footer li {
font-family:Arial;
float: right;
color:white;
font-size:10pt;
display:inline-block;
text-align:center;
height:50px;
padding:0 20px;
line-height:3.3;
border-right:1px solid #000;
border-left:1px solid #333;
}
#footer li {
font-family:Arial;
float: left;
color:white;
font-size:10pt;
display:inline-block;
text-align:center;
height:50px;
padding:0 20px;
line-height:3.3;
border-right:1px solid #000;
border-left:1px solid #333;
}
#footer li:last-child {
border-right:0;
}
body {
background:url('https://static.pexels.com/photos/34088/pexels-photo.jpg');
position:static;
height:400px;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
}
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
I have custom built CSS for me but am no longer in contact with the creator. I wanted to make a div (#rightcolumn) bigger by 55px. I did this by making iframe in the div bigger and it auto expands for me. However the banner, (#topsection), became a little short - so I had to add 55px to that to make it 1255px width.
Now page is off center some. When I try to edit other float commands to fix, the div's end up all over. I've tried for a few days. If anyone could help now with re-centering this. I would really appreciate.
Test page: Serious Sports Bigger
Link to css: CSS link
New Css
body {
margin:0;
padding:0;
line-height:1.5em;
background:#C0C0C0;
}
b {
font-size:110%;
}
em {
color:red;
}
#maincontainer {
width:1200px;
margin:0 auto;
}
#topsection {
background:#191919;
height:90px;
width:1255px
}
#contentwrapper {
float:left;
width:100%;
}
#contentcolumn {
margin:0 360px 0 180px;
color:#F1F1F1;
}
#leftcolumn {
float:left;
width:180px;
margin-left:-1200px;
background:#C8FC98;
}
#rightcolumn {
float:left;
width:355px;
margin-left:-355px;
background:#E5E5E5;
}
#footer {
clear:left;
width:100%;
background:#191919;
color:#FFF;
text-align:center;
padding:4px 0;
}
#footer a {
color:#62C301;
}
.innertube {
margin:10px;
margin-top:0;
}
.arrowgreen {
width:180px;
border-style:solid solid none solid;
border-color:#94AA74;
border-size:1px;
border-width:1px;
}
.arrowgreen ul {
list-style-type:none;
margin:0;
padding:0;
}
.arrowgreen li a {
font:bold 12px Verdana, Arial, Helvetica, sans-serif;
display:block;
background:transparent url(http://i39.tinypic.com/2r2rhnc.gif) 100% 0;
height:24px;
padding:4px 0 4px 10px;
line-height:24px;
text-decoration:none;
}
.arrowgreen li a:link, .arrowgreen li a:visited {
color:#5E7830;
}
.arrowgreen li a:hover {
color:#26370A;
background-position:100% -32px;
}
.arrowgreen li a.selected {
color:#26370A;
background-position:100% -64px;
}
You also have to change DOCTYPE to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
#maincontainer is only 1200px;, your contents are overflowing. Solution:
#maincontainer{
width:1255px; margin:0 auto;
}
Try to add this:
body {
margin : 0 auto;
}
All the CSS is being applied twice, you will need to look into that.
Just apply the following CSS:
#maincontainer {
width: 1255px;
margin: 0 auto;
}
#contentwrapper {
float: left;
width: 1200px;
}
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 killing me for hours already :'( Can anyone help me to position the logo and navbar inside the header???
I am trying to put the "logo" inside the header (to the left side) and "navbar" inside the header (to the right side) but even though i tried many different properties my navbar is always outside of the header container... Header should be fixed.
http://jsfiddle.net/L7kPu/10/
<header>
Logo
<ul id="nav" class="nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
html, body{
margin:0px; padding:0px; height: 100%; }
section {
height: 100%;
}
header{
z-index: 1;
position:fixed;
width:100%;
background:rgba(0,0,0,0.1);
}
header ul{
float:right;
}
header ul li{
display: inline;
float:left;
}
header a{
color:white;
background:rgba(0,0,0,0.1);
display:inline-block;
padding:0px 30px;
height:60px;
line-height:60px;
text-align:center;
font-family: 'Roboto Slab', serif;
text-decoration:none;
text-transform:uppercase;
letter-spacing:2px;
font-weight:700;
}
Your ul had margin and padding :)
Working Fiddle
header ul{
float:right;
padding: 0;
margin: 0;
}
header ul li{
display: inline;
float:left;
}
header a{
color:white;
background:rgba(0,0,0,0.1);
display:inline-block;
padding:0px 25px;
height:60px;
line-height:60px;
text-align:center;
font-family: 'Roboto Slab', serif;
text-decoration:none;
text-transform:uppercase;
letter-spacing:2px;
font-weight:700;
}
I also changed the left and right padding on the header a for the sake of the fiddle.
Updated Fiddle
Here is the modified css for your code:
#logo {
float: left;
position: aboslute;
}
#nav {
white-space: nowrap;
margin-top: 0;
margin-right: 0;
}
header {
z-index: 1;
position:fixed;
width:100%;
background:rgba(0, 0, 0, 0.1);
height: 60px;
}
Here:
header ul
{
float:right;
margin: 0;
}
header ul li
{
display: inline;
float:left;
margin: 0;
}
Also cleaned up your code a little:
http://jsfiddle.net/L7kPu/17/