so im currently stuck on my footer of the website i am making. I am not sure as to why the footer background does not fit to the sides and bottom of the page, any help ? Thanks for your time.
http://codepen.io/anon/pen/GgMGvY
.footer {
background-color: #5a5a5a;
margin-top:30px;
padding-top:30px;
}
.bottom-footer {
border-top:1px solid #b2b2b2;
margin-top:10px;
padding-top:10px;
color:#b2b2b2;
}
.footer-nav {
text-align:right;
list-style:none;
}
.footer-nav li {
padding:0px 10px;
display:inline;
}
Your .offer class has padding: 50px set. This is why your footer is not extending to the sides of the browser window. - answered
Your .offer class has padding: 50px set. This is why your footer is not extending to the sides of the browser window.
The reason why your footer does not extend to the side is that it was inside another div .offer which has a padding of 50px. Try setting it to 0.
Your .offer class has padding: 50px set. This is why your footer is not extending to the sides of the browser window. - ANSWERED
Related
I have a problem with styling with CSS.
I can't fit the #main to the screen. I have a menu on the left side and i would like to have the main screen from the right next to the menu.
body {
background-color: lightgray;
padding: 30px 100px 0 100px;
}
nav {
line-height:30px;
width:20%;
float:left;
padding:5px;
}
#main{
position: relative;
width: 80%;
float:left;
padding:10px;
}
Here you are the screenshot how it is looking now:
How should I place "Content of the document" (#main) to be next to the nav?
EDIT: I have placed my code here: http://jsfiddle.net/47tjbnrt/
The problem is caused by your adding padding to the width. width is the width of its content and you set one to 80%, the other to 20%, and then add padding on top of that. Padding is the area around the content and, therefore, the width. That is why your second div drops down.
Either remove the padding or reduce the width of your elements.
body {
background-color: lightgray;
padding: 30px 100px 0 100px;
}
header {
text-align: center;
}
nav {
line-height:30px;
width:20%;
float:left;
padding:5px;
}
#main {
width: 70%;
float:left;
padding:10px;
}
I changed the width to 70%, since you have a lot of padding. (Also removed the position: relative from your #main, do you have anything with position: absolute inside the main section?)
Also changed the width to 70%, since you have a lot of padding.
Pretty new to html and css and i'm just having the problem described in the title. My nav is pushing down div with the id main.
nav{
width:120px;
float:left;
margin:0px 5px 0px 5px;
#main{
display:inline-block;
padding: 1em;
float:left;
position:relative;
min-width: 900px;
Any help is appreciated, cheers.
edit:
Hi guys, maybe i should explain it better. On the page there is a nav to the left and a div to the right of it. When the windows width is made smaller the div to the right is being pushed below the nav instead of stay where it is and it's content being displayed off the screen.
You have explicitly told your element to behave like that. When you set min-width and a width in pixels, you are telling your elements to stay the same size no matter what happens. Remove min-width and set width to a percentage value like 1% instead of 50px like this:
nav {
width: 50%;
background: red;
height: 50px;
float:left;
}
#main {
display: inline-block;
height:50px;
float:left;
position: relative;
width: 50%;
background: black;
}
body {
margin: 0;
}
<nav></nav>
<div id="main"></div>
Cheers, I'm making a horizontal link menu.
I made parent div height 46px and would like to achieve anchor padding with 46px height in total.
How do I do that?
<div class="outside">
FCC
</div>
I'd like the green rectangle to fit inside parent div :)
.outside{
width:100%;
height:46px;
background-color:red;
}
.outside a{
float:left;
text-decoration:none;
background-color:green;
padding-top:15px;
padding-bottom:15px;
font-size:16px;
}
There were some similiar questions but none of them included padding (which can be pretty complicated to calculate).
http://jsfiddle.net/T2Nqd/
Note: I'd like the link to stay centered inside padding and to be able too keep his width about 200px or so
Try this
.outside a {
float: left;
padding: 13px 0px;
text-decoration: none;
background-color: green;
font-size: 16px;
}
You may add code of css like this
.outside a{
line-height: 16px;
}
Because the fonts's hight is not only 16px, so padding + fonts'height > 46px, so you just to set line-height to solve this question.
Let me please say that I am very new at HTML/CSS so excuse my very sloppy code. Basically, all I want is a header with my name in it and then my nav bar on the top right. But when I resize the window, the nav bar is stuck to the top right and will overlap my heading. I just want it to stay put!
I'm not sure if this is enough information but I'll put my CSS code below. I've been trying for over an hour to get it to resize from the top left. I tried position:fixed / right:0px but nothing happens. If you guys can help I'll be forever grateful.
div#wrapper {
width: 98%;
margin: auto;
}
div.header {
background-color:black;
height: 80px;
width:100%;
position:fixed;
}
div.menu {
width:600px;
height:100px;
position:absolute;
right:0px;
margin-right:10px;
}
div.menu p {
display:inline-block;
float:right;
margin-top:0px;
}
div.menu a {
text-decoration: none;
display:block;
width: 100px;
padding: 30px 10px 29px 10px;
text-align:center;
margin-left: -5px;
color: black;
background-color:white;
font-family: Trajan Pro;
border-left: 1px solid black;
border-right: 1px solid black;
font-size:16px;
}
Thanks so much in advance!!
What I understood is this:
You want to resize the window, but you want your navigation bar not to be resized. If this is what you ask what you should do is simple.
Your current child-parent relation is like this (if I understood correctly)
<div id="wrapper">
<div id="menu"></div>
<div id="navigationbar"></div>
</div>
What you want is this:
<div id="wrapper">
<div id="menu"></div>
</div>
<div id="navigationbar"></div>
This way your navigation bar div won't be resized or won't change position. To make it stuck in top right here is the css code you need:
.navigationbar{position:absolute; top:0px; right:0px;}
If this does not solve your problem please explain how you resize or share a link here so we can understand easier.
I'll start by saying that my css skills are very weak.
Here is the site, and I was trying to add some margins to this background so I can see all the content. I now understand that I am not able to use margins on a background, so what are my options here?
Here is my HTML
<body>
<div id="container">
<nav id="navigation">
<ul>
<li>Homepage</li>
</ul>
</nav>
</div>
</body>
and here is my css
body {
background: url('images/prices.jpg');
min-height: 100%;
height: 100%;
}
#btn {
color: #FAF3BC;
background: #4FB69F url('images/texture.png') no-repeat right bottom;
padding: 15px 30px;
margin: 150px 0px;
border-top: 5px;
border-radius: 25px;
text-decoration: none;
text-transform: uppercase;
}
I am also having issues with the homepage button, I would like some room there as well, but I've tried couple of things like padding and margin and was not able to do it...
I would appreciate any help .... here is the page live, if you like to take a peak http://brewstahs.com/menu.html
I know why your css is not working. The most basic use of CSS is to create a layout, but even though your DOM contains div representing container and footer, the height occupied by each is
equal to the height of its content(because you have not provided any height to the div containers).In short,
margin : 150px 0px does not work because the parent container(nav) does not have that height to provide the margin to it. So provide a height to nav and div and it will work.
Use tools like Firebug to see your layout and see where you're going wrong.
All the best!!
Maybe you should try with background-position attribute:
http://www.w3.org/wiki/CSS/Properties/background-position
What do you want to do?
In case of moving the button, try
margin-top: 50px; for example in the css of btn. This way, the button is moved 50pixels to the bottom. Margin-left moves the button to right, ...
if you are trying to move the button down then you need to first put it in a wrapper
if not try this .
body {
background: url('images/prices.jpg');
min-height: 100%;
height: 100%;
}
#navigation {
position:relative;
display:block;
margin:40px 0px 0px 0px;
padding:0px;
width:auto;
height:auto;
}
#navigation ul {
display:block;
position:relative;
margin:auto;
padding:0px;
}
#navigation ul li {
list-style:none;
}
#btn {
color: #FAF3BC;
background: #4FB69F url('images/texture.png') no-repeat right bottom;
padding: 15px 30px;
margin: 150px 0px;
border-top: 5px;
border-radius: 25px;
text-decoration: none;
text-transform: uppercase;
}
and about your background you can try one thing. Have a looping background texture similar to the one you have right now with background-repeat:repeat; and then put the main background image above it with z-index and centered if required. Just to give you a simple example
body {
background-image:url('images/loop.jpg);
background-repeat:repeat;
}
#backgroundimg {
background-image:url('images/prices.jpg);
background-repeat:no-repeat;
display:block;
position:relative;
width:980px;
height:700px;
margin:auto;
padding:0px;
}
hope this helps :)