having a very hard time getting my header image to be centered.
body {
font-family:Verdana, Genova, sans-serif;
background-color:#000;
}
divWrapper {
width:700px;
margin:20px auto;
}
divHeader {
width:700px;
background-color:#999;
}
and my html...
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Just Messing Around</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="divWrapper">
<div id="divHeader"><img src="raiderd.png" width="405" height="68"/></div>
</div>
</body>
</html>
just seems to stay stuck in the top left no matter what i do...
the "#" for IDs are missing
#divWrapper {
width:700px;
margin:20px auto;
}
#divHeader {
width:700px;
background-color:#999;
}
The image won't be centered just because you have two nested tags of the same width. You might try using ...
#divHeader img {
display:block;
text-align:center;
}
<div id="divHeader"><img src="raiderd.png" width="405" height="68"/></div>
Truthfully, I forget (and I'm eating dinner). It all depends on what the final look of the header div will be. Everything centered? In that case, I might put text-align:center; on the <div> . You should get it by tinkering, though.
Above is true, also the #divHeader needs to have margin: auto; width must be smaller than the wrapper..
Check out this Jsfiddle. Change the text for your image and increase the divHeader width to be the size of your image (must still be less than your wrapper).
http://jsfiddle.net/f5yGQ/
body{
width:90%;
}
#divWrapper {
width:700px;
background-color:#999;
margin:auto;
}
#divHeader {
width:20px;
margin: auto;
}
You can ignore the body attribute
Related
I want the following layout in my page:
The header and footer are always visible. The gray area is an article tag. The green and dark red areas are both inside a nav tag. The dark red has a fixed width, and is going to be used as a handle to resize the green navigation panel (it will be very narrow, of course, and I'll use JavaScript for the resizing). Both the gray and green areas must have their own scrollbars.
That's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>CSS template</title>
</head>
<body>
<header>Header</header>
<main>
<nav>
<div class='navcont'>
<p>nav1</p>
<p>nav2 with longer line just to make sure if everything is working as intended</p>
</div>
<div class='handle'>Handle</div>
</nav>
<article>
<p>Article</p>
</article>
</main>
<footer>Footer</footer>
</body>
</html>
That's the CSS:
html, body {
height:100%;
margin:0;
}
body {
display:flex;
flex-direction:column;
}
header {
text-align:center;
}
main {
flex:1;
display:flex;
min-height:0;
}
article {
background:#C0C0C0;
width:80%;
overflow:auto;
padding:10px;
}
nav {
width:20%;
height:auto;
overflow:hidden;
}
.navcont {
background:#00FF00;
width:auto;
}
.handle {
background:#800000;
float:right;
width:30px;
}
footer {
text-align:center;
}
And a running example: https://jsfiddle.net/etwphhc8/
I tried many different solutions, from many different questions/answers here, but still haven't make it work as intended. So, how can I achieve the wanted layout using CSS?
Add flex with the direction set to row in nav:
nav {
width:20%;
height:auto;
overflow:hidden;
display:flex;
}
Try to write:
.navcont {
background:#00FF00;
width:auto;
height: 100%;
}
Absolute beginner in HTML. It is a layout question. I have a header of width 100%
Than I want to have a nav section for navigation which should be 15% of the page, than the rest 85% should display some content. Ending webpage with footer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="fr, 09 okt 2015 06:20:07 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="mateusz.css">
<title>Nowa strona</title>
</head>
<body>
<div id = "header"> dada</div>
<div id = "nav" class="container"> <h1> ma </h1> </div>
<div id = "section" class="flex-column"> WTH </div>
<div id = "footer"> M </div>
</body>
</html>
style:
body { margin:40px;
padding:5px }
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
height:200px;
width:100%
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:15%;
float:left;
padding:5px;
display:inline-block;
}
#section {
float:left;
background-color: red;
width:85%;
display:inline-block;
padding:5px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
width:100%;
}
But I receive that which I interpret as the 15% and 85% is not equal to 100% (WTH is lower in relation to nav? I tested 83% and than is correct but the "red" does not overlap fully with the header
What should I do to make it right?
The problem here is that the padding gets added to your container width. So its 85% width + 5px on each side which results in a greater width than 85%.
You can fix that by adding the following code: box-sizing: border-box;
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:15%;
float:left;
padding:5px;
display:inline-block;
box-sizing:border-box;
}
#section {
float:left;
background-color: red;
width:85%;
display:inline-block;
padding:5px;
box-sizing:border-box;
margin-left:-5px; /* margin-left: -5px has to be done to fix the display:inline-block; default margin*/
}
In addition I wouldn't recommend to use inline-bock and float for one element. You should decide on either float or inline-block.
Write this in the section and nav:
#section , #nav { box-sizing:border-box; }
That's because the padding is counted as the total width (and the border too), but without it the padding and the border is incrementing the width
And please, don't mix floats with inline-block elements.
Apply box-sizing to all elements. It will help you to calculate width, height, margin, padding, border easily.
* {
box-sizing:border-box;
}
Above '*' selects all elements and it will apply this on every elements you'll have.
Read this for more information - https://css-tricks.com/box-sizing/
It is because of padding. So change with this one.
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:15%;
float:left;
display:inline-block;
}
#section {
float:left;
background-color: red;
width:85%;
display:inline-block;
}
When the nav is float: left, the section should also be float: left.
That is because padding:5px; in your #section and #nav classes
I wanted to fit my site to browser i tried this and when i try the " width=100%
height=100% " for body's css it does ok and when i tried that with container's div it sort of disappears meaning the background color is not seen
This is html:
<html>
<head>
<title>Untitled</title>
<link href="css/stylesheet1.css" rel="stylesheet" type="text/css"/>
<link rel="icon" type="image/x-icon" href="images/favicon.ico" /></head>
</head>
<body>
<div id="container">
<div id="header">
<div class="logo">
<div id="logo">Logo</span></div>
</div><!--Logo-->
<div class="search-bar">Search BAr</div>
</div>
</div>
</body>
</html>
this is CSS
body{
width:100%;
height:100%;
margin: 0;
background:#CCC;
}
#container{
width:100%;
height:100%;
margin:0 auto;
background:#000;
}
#header{
width:100%;
height:12%;
float:left;
background:#F00;
}
.logo{
width:50%;
height:100%;
float:left;
background:#0F0;
}
.search-bar{
width:50%;
height:100%;
float:left;
color:#FFF;
font-family: 'century gothic';
text-align:center;
margin-top:20px;
}
#logo
{
width:100%;
height:100%;
float:left;
font-size:48px;
color:#FFF;
font-family: 'century gothic';
text-align:center;
margin-top:20px;
}
I am in trouble help me plzzz
If you want to apply height in % the parent element should have height set explicitly.
So if you simply set height property, the parent tag html doesn't have any height set so it'll take 0 height.
Update: Solved Fiddle
If you want to match it to the browser you could best use this.
CSS
body {
width: 100vw;
height: 100vh;
}
the vh, and vw represent percentage according to viewport width/height;
Please check this link when you set width and height
div{width:auto;height:auto;}
it will set automatically
see this link
http://www.w3schools.com/cssref/playit.asp?filename=playcss_width&preval=auto
If you want the size of an element to be the size of the browser then it has to be a direct child of the body and you need to add this style to the body:
body, html {
width: 100%;
height: 100%;
}
I am trying to do a dynamic grid layout with links to other pages, consisting of a picture and a text.
The problem is that I don't seem to find any way of introducing a whitespace (padding/margin) after the grid layout. In other words, The page ends exactly where the main div ends.
Here is the code. Any help is greatly appreciated, as I have tried a lot of methods, and neither one of them worked. Thanks a lot.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="resources/index.css" />
</head>
<body>
<div class="header"></div>
<div class="body">
<!-- this is the standard link to each category, which will be inserted n times .. the problem is visible after inserting it a min of 12 times-->
<a href="" class="categorie">
<img src="imgs/asd.png" class="imagine"/>
<div class="nume"> </div>
</a>
</div>
</body>
</html>
CSS :
html
{
background-color:Grey;
height:auto;
}
body
{
display: table;
padding:20px;
margin: 0 auto;
height:100%;
}
.header
{
background-color:white;
width:700px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
height:75px;
}
.body, .body>html
{
background-color:black;
width:700px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
padding-bottom:20px;
position:absolute;
display:block;
height:auto;
}
.categorie
{
background-color:white;
margin-left:20px;
float:left;
margin-top:20px;
height:180px;
width:150px;
}
.imagine
{
width:150px;
height:150px;
}
.nume
{
background-color:green;
width:150px;
height:30px;
margin-top:-5px;
}
I'm not sure exactly why there was a display: table on the body element, you said:
"Because I use position:absolute in the .body class.. otherwise, the .body will not extend to encapsulate all of the links."
So I was able to remedy both problems by removing both the display: table from the body element and position: absolute from the body class, then added overflow: auto to the body class.
The CSS:
body{
padding:20px;
margin: 0 auto;
height:100%;
}
.body, .body>html {
background-color:black;
width:700px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
padding-bottom:20px;
display:block;
height:auto;
overflow: auto;
}
The JSFiddle:
http://jsfiddle.net/Artsen/VhSdg/
Here is a working fix, in case for some reason, you'd want to keep the body table display.
http://jsbin.com/agucar/2/edit
First change
.body, .body>html
{
position:absolute;
}
to
.body /* removing .body>html didn't change a thing, meaning it was useless */
{
float: left;
}
That way you will be able to clear the floats with a clearfix div (as if correctly relatively positioned) and if you keep your clearfix div transparent, the height you give it will serve as "margin".
Add <div id="clearfix"></div> after <div class="body"></div>, and give the clearfix this CSS:
#clearfix {
height: 20px;
width: 100%;
position: relative;
clear: both;
}
EDIT: Artsen's answer works too, and if you don't need to keep the .body {display: table}, his answer is more suited.
I am trying to find a way to center the logo + text. The image+text should be center vertically and horizontally.
I tried couple of things and now i have this html
<html>
<head>
<title>XXX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
}
#floater {float:left; height:50%; margin-bottom:-120px;}
#Content {
clear:both;
width:500px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:center; /* Counteract to IE5/Win Hack */
padding:15px;
height:240px;
position:relative;
}
#text-center{
text-align:center;
font-family:Tahoma, Geneva, sans-serif
}
</style>
</head>
<body>
<div id="Content">
<img src="logo_small.jpg" width="400" height="143">
<p id="text-center">Coming soon</p>
<p id="text-center">more text</a></p>
</div>
</body>
</html>
I don't know anything related to html/css
Here's what I came up with: http://jsfiddle.net/CMfEH/
I used a variant of what's descriped in Vertically Centering in CSS.
Vertically aligning content is typically a bad practice but can be achieved using
EDIT: had to switch up some css...
#Content {
margin: 0px auto;
...
height: 100%;
}
#subContent {
position: absolute;
top: 50%;
height:240px;
margin-top: -120px;
}
And creating a <div id="subContent"> div inside your Content parent div.