I am css beginner and I got a little problem. I am trying to make simple header with logo on the left and some elements on the left side of the header (util). The code is below. It works but I set my header background to Green color and it missing when I open the page. What have I done wrong?
<div id="wrapper">
<div id="header">
<div id="logo">
</div>
<div id="util">
Vladimir Vucetic
</div>
</div>
</div>
body
{
padding: 0;
margin: 0;
font: small Arial, Helvetica, Verdana, sans-serif;
}
#wrapper
{
border-left: 1px solid #000000;
border-right: 1px solid #000000;
margin-left: 20%;
margin-right: 20%;
}
#header
{
background-color: Green;
}
#logo
{
background: url(/images/logo.gif);
background-repeat: no-repeat;
width: 94px;
height: 24px;
float: left;
}
#util
{
padding: 0;
float: right;
}
You have floated elements in your header. That's why it behaves like it has no children. So try
#header
{
background-color: #0f0;
overflow: hidden;
}
This looks like a clearing issue. Due to the fact that you have two floated elements in the parent container you will need to 'clear' them. You can do this in multiple ways.
1) Apply the following to the header:
#header
{
overflow:hidden;
height: 1%;
}
OR
2) Add a clearing div before closing the header div
<div style="clear:both"></div>
Related
To preface: I've come across a number of other solutions but have had no luck finding one that works. I'm currently using this answer for align my text to the bottom of my divs, but without any luck.
For whatever reason, my vertical-align: bottom; property does not affect the css of the page at all. What am I doing wrong here if I want to align the text to the bottom of the image?
index.html
<body>
<div class="header">
<div class="container">
<div class="pull-left">
What's This?
</div>
<img src="http://placehold.it/75x75" />
<div class="pull-right">
About
</div>
</div>
</div>
<!-- Modules -->
<!-- Controllers -->
<!-- Services -->
</body>
main.css
html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
body {
background-color: #FF3B4E;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
background-color: white;
text-align: center;
height: 125px;
}
.header img {
margin: 25px 0;
}
.header .pull-left{
border: 1px solid black;
height: 75px;
margin-top: 25px;
top: 0;
line-height: 75px;
vertical-align: bottom;
}
.header .pull-right {
border: 1px solid black;
height: 75px;
margin-top: 25px;
top: 0;
line-height: 75px;
vertical-align: bottom;
}
The reason I have boxes around pull-left and pull-right is for visual purposes when dealing with this problem. I'll remove the borders once I can get the text to align properly. Thanks for any help!
jsfiddle: https://jsfiddle.net/rtc498uk/
EDIT: My goal is to get the text to align like this:
.pull-right a, .pull-left a{
line-height: 1em;
vertical-align: bottom;
}
I've been trying to find a solution to this for days, but haven't found anything that works.
I thought I'd finally make an account on this great website, so here goes:
I am trying to have a div expand from left to right, with 170px of clearance on both sides.
However, when there is no content on the page, or only a few words, the div doesn't expand.
I've tried to add width: 100% in several different divs to try and have them take up the full space, but that either does nothing, or completely busts the page layout. for example, instead of filling out the page, the div that's supposed to hold the content moves off the right side of the screen, and also doesn't leave the 170px margin.
I hope you can be of help, my code is posted below:
Thanks in advance,
Chris
the html:
<html>
<body>
<div id="wrapper">
<div id="pagetopwrap">
</div>
<div id="pagemainliquid">
<div id="pagemainwrap">
<div id="content">
<div id="headerwrap">
<div id="header_left">
</div>
<div id="header_main">
<div id="logo_row">
<p id="logotext">Site Title</p>
</div>
<div id="menu_row">
<!-- irrelevant menu button code -->
</div>
</div>
<div id="header_right">
</div>
</div>
<div id="contentbody">
<div id="contenttext">
<p id="contenttextmakeup">Lorum Ipsum Dolor Sit Amet</p>
</div>
</div>
</div>
</div>
</div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</div>
</body>
</html>
the css:
It is not ordered too well, the uninteresting sides, top and footer are first, and the main part of the website at the bottom
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #0f0f0f; /* is normally an image */
}
#wrapper {
width: 100%;
min-width: 960px;
max-width: 1920px;
margin: 0 auto;
height: 100%
}
#pagetopwrap {
height: 50px;
width: 100%;
float: left;
margin: 0 auto;
}
#pagemainliquid {
float: left;
}
#pagemainwrap {
margin-left: 170px;
margin-right: 170px;
float: left;
}
#leftcolumnwrap {
width: 170px;
margin-left:-100%;
float: left;
}
#leftcolumn {
margin: 5px;
}
#rightcolumnwrap {
width: 170px;
margin-left: -150px;
float: left;
}
#rightcolumn {
margin: 5px;
}
#footerwrap {
width: 100%;
float: left;
margin: 0 auto;
clear: both;
bottom:50px;
}
#footer {
height: 0px;
margin: 5px;
}
#headerwrap {
width: 100%;
margin: 0 auto;
}
#header_left {
background-color: #ff0000; /* is normally an image */
width:25px;
height:200px;
float:left;
}
#header_right {
background-color: #ff0000; /* is normally an image */
width:25px;
height:200px;
margin-left: 0px;
float:right;
position:relative; top:-200px;
}
#header_main {
background-color: #00ff00; /* is normally an image */
margin-left: 25px;
margin-right: 25px;
height:200px;
background-size: 100% 200px;
}
#contentbody {
background-color: #E2E2E2;
border-radius: 10px;
margin-top:10px;
border: 1px solid #A7A7B2;
}
#contenttext {
margin-left:10px;
margin-right:10px;
}
#logo_row {
height:150px;
width:100%;
float:left;
}
#logotext {
margin-top:20px;
margin-left:10px;
vertical-align: middle;
font-size: 55px;
font-family: "Arial Black", Arial;
}
#contenttextmakeup {
margin-top:12px;
margin-left:10px;
vertical-align: middle;
}
#menu_row {
width:100%;
}
button.menubutton {
/* irrelevant button markup */
}
http://jsfiddle.net/w9qLh6tp/ if that helps, I've seen it a lot around here :)
Instead of using !important, save yourself a headache in figuring out why important works.
CSS = cascading style sheets. You have a selector with more specificity which is why your width property isnt changing. Figuring out the route of the problem will save you time in the future when this happens again (and it will)
For example, if I styled something like so
#container .red { width: 50% }
updating the style using .red without the #container in front of it has less specificity. So if they are both modifying the same property, the one with more prevalence will take effect. This is true for media queries as well.
Fixed here http://jsfiddle.net/w9qLh6tp/1/
#pagemainwrap {
margin-left: 170px;
margin-right: 170px;
float: left;
width: 100% !important; // set it highest priority
border: 3px red solid; // border is set just for demonstration
}
set the width to be 100% with priority (!important) that will override any other css styling.
Here is my HTML:
<body>
<nav>
<div id="navBar">
<ul>
<li>ESILEHT</li>
<li>UUDISED</li>
<li>ÜLEVAATED/ARVUSTUSED</li>
<li>LOGI SISSE</li>
</ul>
</div>
</nav>
<div class="content">
<div id="logo">
<img src="http://i.imgur.com/Y4g5MOM.png" alt="Gaming website logo" height="84" width="540"/>
</div>
<div id="tervitus">
<h3 id="tere">TERE TULEMAST</h3>
</div>
</div>
<div class="artikkel">
<p>check check</p>
</div>
<footer>©2014 Janno.</footer>
</body>
</html>
Here is my CSS:
#navBar{
width: 100%;
float: left;
position: absolute;
top: 0;
background-color: #000000;
left: 0;
min-width:760px;
}
#navBar ul{
list-style:none;
margin: 0 auto;
}
#navBar li{
float: left;
}
#navBar li a:link , a:visited{
font-size: 90%;
display: block;
color: #ffffff;
padding: 20px 25px;
font: 18px "open sans", sans-serif;
font-weight: bold;
text-decoration: none;
}
#navBar li a:hover{
background-color: #F0F0F0;
color: #000000;
text-decoration: none;
}
#logimine{
}
body{
margin: 15px;
padding: 15px;
background-color: #F0F0F0;
min-width: 700px;
}
.content, .artikkel{
max-width: 65%;
margin: 1em auto;
box-shadow: 0 3px 7px rgba(0,0,0,.8);
background-color: #ffffff;
padding: 3em;
padding-bottom: 350px;
margin-bottom:50px;
}
#tervitus{
background-color: black;
color: white;
font: 18px "open sans", sans-serif;
font-weight: bold;
}
#tere{
margin-left: 5px;
}
#logo{
}
#regnupp{
color: blue; /*miks see valge on muidu*/
}
.uudised{
max-width: 65%;
margin: 4em auto;
box-shadow: 0 3px 7px rgba(0,0,0,.8);
background-color: #ffffff;
padding: 3em;
padding-bottom: 350px;
margin-bottom:50px;
}
.uudised{
padding-left: 115px;
}
.uudised img{
float: left;
width: 100px;
margin-left: -75px;
}
.uudised p, h2{
margin-left: 50px;
}
.uudised hr{
margin-top: 50px;
margin-bottom: 50px;
}
footer {
text-align: center;
margin: 0 auto -40px;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
font-weight:300;
color:#ffffff;
background-color:#000000;
}
If I understand correctly, the <footer>, when using width: 100%; looks like the width of the <body> element, so I tried quite a few things and nothing. This is my first try at a webpage, so is there anything I can do, to have the <footer> use the entirety of the page width, without drastically changing everything?
Make sure that firstly your css is set up properly such as:
body {
margin: 0;
}
then your footer css should be something like this:
.footer {
margin: 0;
width: 100%;
height: 120px;
background-color: red;
}
This should work obvious then your html should be something like:
<html>
<body>
<div class="footer">
</div>
</body>
</html>
Hope this helps!
JsFiddle
I added extra styles to the JSFiddle for presentation and proof, but the code works the same without.
Do this:
HTML
<body>
<footer>Hi</footer>
</body>
CSS
html,body{
width:100%;
height:100%;
marging:0;
}
footer{
height:120px;
width:100%;
position:absolute;
bottom:0;
}
Block level elements
To understand this issue you need to understand about display:block. Block level elements (elements which declare display:block) by default take up the full width of their containing element.
In this case, the footer is, in all newish browsers, a block level element, and so will take up the full width of its container, in this case the body. There is no need to set width:100%;
Older browsers
In older browsers, the newer HTML5 elements, including block, are inline by default, so you need to set them to be block level in your CSS, like so:
footer {
display:block;
}
This is good practice.
Floats
There are several things which can get in the way of this behaviour, notably floats. If you float an element, to the left or right, it will become as narrow as it possibly can, while still enclosing it’s contents. This may or may be your issue here.
Do please post your code.
set footer width to viewport width width: 100vw;, and add the viewport meta tag to your header:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
There is a good full width and sticky to bottom (if you need) solution:
<div class="content">
<!-- content here -->
<div class="hfooter">
<!-- For Content not to lay under the Footer -->
</div>
</div>
<div class="footer">
<!-- footer content here -->
</div>
and CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.content {
height: 100%;
}
.hfooter {
height: 100px;
}
.footer {
height: 100px;
margin-top: -100px;
}
Hope it is that what you need)
DEMO here: http://jsfiddle.net/verber/63gbg/11/
Need help to fix the footer. One of the boxes fals out of the footer. All 3 should be in a line, next to each together. The Css is uploaded and html showed. However i've tried a lot of stuff but seems nothing to be working. however the right box always out of the footer, i cloudn't figure out the problem
so please it would be great to get some help and understand exactly where i did go wrong so i can learn it
thank you :D
Css and html
<%-- Footer --%>
<div id="footer">
<div id="footer_placement">
<div id="left">
<p></p>
</div>
<div id="middel">
<p></p>
</div>
<div id="right">
</div>
</div>
</div>
<%-- Footer --%>
#footer {
bottom: 0;
width: 100%;
display: block;
background-color: #fff;
max-height: 50px;
}
#footer_placement {
max-width: 1024px;
margin: 0 auto;
display: block;
max-height:50px;
}
#right {
float: right;
height: 50px;
width: 298px;
background-color:black;
}
#right img {
height: 50px;
width: 50px;
}
#middel {
height: 50px;
margin: 0 auto;
width: 300px;
background-color:black;
}
#middel p {
text-align: center;
color: #321a51;
font-size: 12px;
font-family: muli;
}
#left {
width: 298px;
height: 50px;
float:left;
background-color:black;
}
#left p {
text-align: center;
color: #321a51;
font-size: 12px;
font-family: muli;
}
use display:inline-block; for this ids: middle - left - right
Fiddle
Your problem is the width of the left right and middle divs .
They don't really add up .. try to change the width .. make it smaller
jsFIDDLE example
Here is my code.
I get a top space inside the left div above <h2>Nav</h2> and another on top of the right div above <h2>Title</h2> I am not sure why and these spaces are not wanted. Any help would be appreciated.
Thanks
HTML
<body>
<div id="leftSide" >
<h2>Nav</h2>
Internal Link
No Follow Link
New Window Link
</div>
<div id="rightSide" >
<h2>Title</h2>
</div>
</body>
CSS
body
{
width: 955px;
margin: 0 auto;
}
#leftSide
{
float: left;
padding-left:0px;
background-color: #D3D3D3;
width: 190px;
height: 579px;
border-right: 1px solid Black;
}
#rightSide
{
margin-left: 191px;
width: 764px;
height: 579px;
background-color: Green;
}
.txtLinks
{
padding-left: 35px;
padding-right: 25px;
}
Its just the default top/bottom margin that appears on all header elements - just add:
h2 {
margin: 0;
}
Consider using a reset in your stylesheet to remove all of the default UA styles