I have been working on a website the last couple of days, and today I just ran into a problem when I wanted to move the navigation bar down from the top of the page. This have never been a problem for me, but I have read my code so many times by now, that I'm not able to find the mistake.
What I did was to add a margin-top: 50px; to my navigation div, but it then proceeds to create a white border above the parent div.
CSS
#section1 {
background-image: url("images/section1bg.jpg");
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
#topnav {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
text-align: right;
width: 400px;
padding-bottom: 10px;
border-bottom: 1px solid white;
position: relative;
}
HTML
<div id="section1">
<div id="topnav">
Languages
Contact
</div>
... other content
</div>
The image below should show the issue.
http://i.stack.imgur.com/8e1mW.png
If anyone has an idea about what to do, I would love to hear from you.
Thank you :)
Change margin-top: 50px; to padding-top: 50px;
#topnav {
padding-top: 50px;
margin-left: auto;
margin-right: auto;
text-align: right;
width: 400px;
padding-bottom: 10px;
border-bottom: 1px solid white;
position: relative;
}
Now define your #section1 id css overflow:hidden;
#section1 {
overflow: hidden;
}
Demo Fiddle
What color do you want the 'white' space you could create a div on top
<div style="background-color:#black;width:100%;height:50px"><div>
Related
Here's my page:
https://i.stack.imgur.com/mKp9H.png
I don't know why it's not aligned... I'm newbie in html and CSS.
Here's my code:
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#logo {
background-color: black;
color: white;
text-align: center;
padding: 15px;
}
#nav {
min-height: 640px;
width: 130px;
background-color: lightgray;
float: left;
}
#content {
min-width: 687px;
padding: 20px;
float: left;
}
#ad {
float: left;
width: 122px;
min-height: 620px;
background-color: yellow;
padding: 10px;
}
#footer {
clear: both;
background-color: black;
color: white;
text-align: center;
padding: 20px;
}
LINK TO PASTEBIN.
I need this for my school and I can't solve this problem.
I've been trying for past few hours to get it to work, I tried to google for fix but they don't seem to work or I'm just too dumb.
PS: Sorry for my english and my "skills" in html.
You probably want to put all content inside the container. "nav", "content" and so on are currently not inside the container as the container is closed before "nav" starts. To put everything inside the container you have to remove the </DIV>-tag before <DIV ID="nav">. This also fixes the problem with the stray </DIV>-tag at the end. Hope this helps.
CSS:
html,
body {
margin: 0;
padding: 0;
height: 100%;
background-color: #E6E6E6;
}
#header {
background-color: black;
width: 100%;
margin-top: 50px;
margin-bottom: 50px;
}
#content {
padding-bottom: 80px;
text-align: center;
}
#footer {
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
left: 0;
background-color: black;
color: #898989;
}
I'm using a really common method to keep the footer at the bottom of the page, and it only half works. I learnt about it through a blog, and it was really helpful at first, however at some point editing my website it became broken. It displays a very small portion of the footer div, and while the rest is there, you have to scroll down to see it.
Without scrolling: http://i.imgur.com/lKH5Byc.png
With scrolling: http://i.imgur.com/GrGKpzm.png
I don't know what I'm missing here, it just isn't working.
EDIT: So I know this was a terrible question, I left out a lot of stuff because it's a company website and I was just worried about what I included. The culprit turned out to be the margins on the #header element. Removing those made everything work like a charm.
So I know this was a terrible question, I left out a lot of stuff because it's a company website and I was just worried about what I included. The culprit turned out to be the margins on the #header element. Removing those made everything work like a charm.
I have changed only the bottom part
html,
body {
margin: 0;
padding: 0;
height: 100%;
background-color: #E6E6E6;
}
#header {
background-color: black;
width: 100%;
margin-top: 50px;
margin-bottom: 50px;
}
#content {
padding-bottom: 80px;
text-align: center;
}
#footer {
width: 100%;
height: 80px;
position: absolute;
bottom: -100px;
left: 0;
background-color: black;
color: #898989;
}
<div id="header">
.
</div>
<div id="content">
.
</div>
<div id="footer">
.
</div>
does that help?
I'm almost sure this is going to be a clear: both answer, but the trouble I'm having is where to put it, or how to wrap my head around understanding it.
I have divs within divs, and this particular one (sectioncut) is taking into consideration the height of its cousin ul (subnav). I've tried encapsulating the ul in its own div, but I must not understand how position and clear works yet.
This is my first time posting on Stackoverflow, so any feedback is welcome =D
http://jsfiddle.net/JustJinxed/d62eLh4o/
HTML
<div id="pagecut">
<div id="pagebg">
<div id="nav">
<ul id="subnav">
<li>Home</li>
<li>About</li>
</ul>
<div id="sectioncut">
This is a test.
</div>
</div>
</div>
</div>
CSS:
body,html {
border: 0px;
margin: 0px;
height: 100%;
background-color: #2200FF;
}
#pagecut {
width: 95%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 0;
margin-bottom: 0;
background-color: #2200FF;
outline-style: solid;
outline-color:#FF0004;
}
#pagebg {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
background:url(Img/bg1.png);
background-size: 100% auto;
background-repeat:no-repeat;
}
#nav {
width: 98%;
height: 100%;
margin-right: auto;
margin-left: auto;
outline-style: solid;
outline-color:#00FF00;
}
#subnav {
margin: 0px;
padding: 0px;
}
#subnav li {
display:inline;
background-color: #7DA5EB;
border-color: #7DA5EB;
color: #FFF;
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-style: solid solid none;
padding-right: 7px;
padding-left: 7px;
margin-left: 2px;
margin-right: 2px;
font-size: x-large;
}
#sectioncut {
height: 100%;
background-color: #7DA5EB;
}
If I understand correctly, your problem is that #sectioncut is overflowing its container because it is taking the whole container's height and being pushed down by the other div (#subnav) inside the container.
If that's the problem and you want to fill only the space left by the subnav div, I think How can I make a DIV take up the rest of the height of a container div? will help you.
It's my first time answering aswell so I hope I did it right and this was helpful to you.
I'm having problems making my site look good in Firefox. I have a div and then two divs inside the first one and I want the two that are inside two be side by side. This is the HTML:
<div class="gluggi3">
<h2 class="aust">Veðurspá</h2>
<div class="vedurspa">Some content</div>
<div id="map-canvas">More content</div>
</div>
and then the CSS:
.gluggi3{
background-color: rgba(0,0,0,0.5);
padding: 10px;
margin: 10px;
border: solid;
border-color: magenta;
border-radius: 10px;
width: 100%;
}
.vedurspa {
display: block;
width: 50%;
float: left;
padding-right: 50px;
}
#map-canvas {
height: 300px;
width: 300px;
margin: 0px;
padding: 0px;
display: block;
}
This code works fine in Chrome but not in Firefox, in Firefox the div with the class 'vedurspa' dissappears. I tried using inline, inline-block and initialising left like suggested in other questions, but still no luck. Can anyone tell me how I can make them stay side by side in Firefox? Thanks in advance!
you have a padding-right: 50px; on .vedurspa, therefor they are not side by side, removing that would solve your problem
It's not a FireFox issue. When the viewport is to narrow, #map-canvas will start wrapping.
Consider this:
.gluggi3{
background-color: rgba(0,0,0,0.5);
padding: 10px;
margin: 10px;
border-color: magenta;
border-radius: 10px;
width: 100%;
}
.vedurspa {
width: 50%;
padding-right: 50px;
float: left;
}
#map-canvas {
height: 300px;
width: 100px;
margin: 0px;
padding: 0px;
float: left;
}
Fiddle: http://jsfiddle.net/vUvhq/
Also, remove your comma in the first .gluggi3 class
.gluggi3,{}
to
.gluggi3{}
I'm assuming you added the padding-right to .verdurspa so there would be space between the blocks.
Try adding float: right; to #map-canvas
I have a strange behavior on my webpage layout.
When i add some more divs inside "sideBar" div, the central part of the webpage is pushed down. They are not related to the central part. They have borders and i see that they are far from 'main' div. Is there any way to prevent it or i should play with margins every time when i add a new div.
Here is my HTML code:
<div id="sideBarLeft">
<div id='article1'><h3>Article 1</h3><div> //Just added
<div id='article2'><h3>Article 2</h3><div> //Just added
<div id='article3'><h3>Article 3</h3><div> //Just added
<div id='article4'><h3>Article 4</h3><div> //Just added
</div>
CSS code:
#sideBarLeft {
position: fixed;
height: 800px;
width: 250px;
margin-top: 0px;
margin-left: 0px;
margin-right: 1px;
padding-top: 100px;
padding-left: 5px;
float: left;
word-wrap: break-word;
z-index: 1;
border: 1px solid #808080;
}
#article1 {
width: 200px;
border: 1px solid red;
}
Here is the central part:
#container{
margin: 0 auto;
margin-left: 256px;
max-width: 600px;
margin-top: 120px;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
float: left;
width: 600px;
border: 1px dotted #808080;
}
Here is the wrapper:
#wrapper {
width: 1200px;
margin: 0 auto;
}
It is likely because you have something in the main div using clear:both;
Try changing it to clear:right; or remove it