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.
Related
I have two containers, one has a width of 30% and the other has a width of 70% however they are not inline, instead one moves lower and by passes the other container as seen in the screenshot below how can i fix this?
main {
background-color: #f2f2f2;
padding: 10px;
float: right;
width: 70%;
}
aside {
text-align: center;
background-color: #c4c4c4;
overflow: hidden;
float: left;
width: 30%;
}
Here is the Screenshot
http://prntscr.com/jdsy9b
Thanks
Try giving .main box-sizing: border-box;
.main {
box-sizing: border-box;
background-color: #f2f2f2;
padding: 10px;
float: right;
width: 70%;
}
This way you tell the browser to account for padding, you can read more about it in the docs.
The padding actually increases the box width and height
Here i removed the padding and added some height just to see the boxes.
.main {
background-color: #f2f2f2;
height:100px;
float: right;
width: 70%;
}
.aside {
text-align: center;
background-color: #c4c4c4;
overflow: hidden;
float: left;
height:100px;
width: 30%;
}
<div class="main"></div>
<div class="aside"> </div>
Newbie here
I'm making a website that has 2 main sections: one larger section (section A) with 75% width, and another section (section B) with 25% width, appear side by side.
Section A has several p tags with footnote inside, the only problem is that when I hover the footnote, it appears behind the section B, can anybody help me? Thanks!
Screenshot: http://imgur.com/7BQrcP7
CSS Code:
Section A {
margin: 0px;
padding: 0px;
background-color: #FAFAFA;
float: left;
width: 75%;
}
Section B {
float: right;
width: 25%;
text-align: left;
}
Footnote-sign {
background-color: #ffc;
cursor: pointer;
vertical-align: super;
font-size: 77%;
}
Footnote-tooltip {
background-color: #fea;
border: 1px solid #6b0000;
display: inline;
padding: 5px;
display: none;
position: absolute;
font-size: 85%;
max-width: 540px;
text-align: left;
}
You need to add a z-index to the footnote element to make it appear to be above every other element, without the HTML I will just apply the z-index to both footnote CSS elements
CSS
Footnote-sign {
background-color: #ffc;
cursor: pointer;
vertical-align: super;
font-size: 77%;
z-index: 100; /* a large number to ensure it's on top */
}
Footnote-tooltip {
background-color: #fea;
border: 1px solid #6b0000;
display: inline;
padding: 5px;
display: none;
position: absolute;
font-size: 85%;
max-width: 540px;
text-align: left;
z-index: 100; /* a large number to ensure it's on top */
}
Add the z-index to the Footnote-tooltip
Footnote-tooltip {
z-index:100;
}
If you want to achieve this without z-index then follow my pen.
Hope this pen will help you.
'http://codepen.io/anon/pen/NGeaKp'
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>
I'm building a wordpress theme and I'm stuck on something.
I have a div on the side with these styles:
#sidediv{
width: 20%;
height: 71%;
float: left;
overflow: hidden;
background-color: #000;
}
and:
the "content" div with these styles after the sidediv
#main{
background-color: #a70202;
color: #FFF;
min-height: 71%;
padding: 10px;
}
The problem is that the #main div is partly underneath the #sidediv.
The content is next to it as it should be but the padding is not applying and if the background-color is removed from the #sidediv the background-color of the #main is showing underneath
This is the website i'm working on http://vba.durfoptevallen.nl/
try this:
#main{
background-color: #a70202;
color: #FFF;
min-height: 71%;
padding: 10px;
float:left;
width: 80%;
}
Added float:left and width: 80%;
On that url, you have another problem:
http://vba.durfoptevallen.nl/wp-content/themes/Vastgoedbeleggingen_Theme/js/small-menu.js?ver=20120206 is not loading (404)
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