I've tried a few different rules but I can get my top menu to center. When I change the position to absolute or relative it does go to the center but then the height goes to 100% for some reason. I don't have a set height because I want the five to be the size of the children.
Here's the HTML:
<div id="topWrapper">
<a href="index.html">
<header id="top_header">
<h1>MacroPlay Games</h1>
</header>
</a>
<nav id="topnav">
<ul>
<li>Home</li>
<li>About</li>
<li>Trailers</li>
</ul>
</nav>
</div>
CSS:
#topWrapper {
border:1px solid #00ffff;
background-color:#0d0d0d;
text-align:center;
position:fixed;
z-index:9999;
width: 850px;
margin: 0px auto;
float:clear;
}
Fiddle: http://jsfiddle.net/kjAAy/
Add margin:0 auto with left:0px; right:0px
#topWrapper {
border:1px solid #00ffff;
background-color:#0d0d0d;
text-align:center;
position:fixed;
z-index:9999;
width: 850px;
margin: 0 auto; left:0px; right:0px;
float:clear;
}
DEMO
Same method works even for position:absolute
I noticed a small error in the original code and also the code for the most popular response from Sowmya.
More specifically, the property in question is "float: clear;", and to my knowledge there's no such thing as "float: clear;"
Unfortunately, since I just created this account I'm unable to correct the error or reply to that post. Which is why I created a new post.
You can check out W3C for float CSS properties here:
http://www.w3.org/wiki/CSS/Properties/float
Values listed are "left | right | none | inherit"
Thanks for listening!
Position="fixed" is not recommended though.
<div id="someid" align="center">
--whatever code--
</div>
This would do. I recommend you should read the purpose of position tag.
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Or you could use:
border:1px solid #00ffff;
background-color:#0d0d0d;
text-align:center;
position:fixed;
z-index: 9999;
width: 850px;
float: clear;
left: 50%; /* position halfway from the left of screen */
margin: 0px 0px -425px 0px; /* pull the div into center */ }
Fiddle: http://jsfiddle.net/zXFdN/3/
ps align="center" is not supported in HTML5: http://www.w3schools.com/tags/att_div_align.asp
Related
This is for an intro to web design course. We're expected to mimic a layout.
I am using inline-block to get the two columns side by side and I'm pleased with the results except for some space to the right of the black main div. I can't figure out why the parent div is not shrinking to fit the inline-block divs.
Layout with error
I've never used jsfiddle before but this is what I believe is a correct jsfiddle with my html/css code:
https://jsfiddle.net/j8jpqm9p/
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
a:link{
color:#008000;
font-size:1.15em;
font-weight:bold;
}
a:hover{
color:#ccffcc;
font-weight:bold;
font-size:1.15em;
text-decoration:underline;
}
body{
background-color:gray;
}
.container{
overflow:hidden;
border-width:2px;
border-style:solid;
border-color:blue;
border-radius:25px 25px 25px 25px;
}
.topcont{
padding:10px 0px 25px 25px;
background-color:white;
}
.sidecont{
padding: 0px 0px 0px 10px;
display:inline-block;
min-width:200px;
max-width:300px;
background-color:green;
margin:0px;
height: 700px;
}
.maincont{
text-align:center;
display:inline-block;
width:1000px;
background-color:black;
color:white;
height:700px;
margin:0px;
}
.bottomcont{
background-color:white;
padding: 0px 0px 25px 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="topcont">
<a href="http://www4.uwm.edu/" target="_blank" >Link One</a> |
<a href="http://www.uwgb.edu/" target="_blank" >Link Two</a> |
<a href="http://www.uwosh.edu/" target="_blank" >Link Three</a> |
<a href="http://www.wisc.edu/" target="_blank" >Link Four</a> |
<a href="http://www.uwec.edu/" target="_blank" >Link Five</a>
</div>
<div class="sidecont">The sidebar
</div><div class="maincont"> Main content of the page goes in this container
</div>
<div class="bottomcont">Contact information
</div>
</div>
</body>
</html>
I tried to post a link to the layout I'm expected to copy but I'm limited to two links due to my rep. It's basically exactly the same, sans the grey space/third column on the right of the black main container.
Thanks in advance for your help.
Edit to add:
Whatever is causing the parent div (container) to be that large it does not appear to be the topcont or bottomcont divs. I can set those both to width of 50% and they shrink appropriately but the main container div stays as large as it is.
I can manually set the container div down a few % points and minimize the gray gap, but it doesn't go away.
Is there some explicit command to force the container div to shrink to fit it's child divs?
The issue is that your .container is not an inline-block but a block element. And a block element will not wrap around the content, but will always fill the entire available width.
To solve your problem, you can add the following line to .container.
display: inline-block;
Here is the corrected fiddle: https://jsfiddle.net/j8jpqm9p/11/
This will make your container an inline-block as well and make it wrap around the content.
I'm not sure why you are using min-width and max-width though. This will make the total width of your site dependend on the content in your sidecontainer. Your site width will be somewhere between 1200px and 1300px, depending on what you put in .sidecont
Usually you'd want your container to have a fixed width and not change depending on the content inside of it.
.container{
width: 1200px;
margin: auto;
}
.sidecont{
padding: 0px 0px 0px 10px;
display:inline-block;
width: 200px;
box-sizing: border-box;
background-color:green;
height: 700px;
}
.maincont{
text-align:center;
display:inline-block;
width:1000px;
background-color:black;
color:white;
height:700px;
}
Notice that we added an extra line to .sidecont:
box-sizing: border-box;
This is to make sure the padding of the element does not count against the width of the element. Without this line, your sidecontent block will be 210 pixels wide. (200px + 10px padding)
I hope it solves your problem. Keep in mind though that there are far better ways of constructing these types of grids.
I think you'll need to add a few things if you want to do it this way.
First, you should set set box-sizing globally to border-box as this will make working with flexible widths much easier.
* {
box-sizing: border-box;
}
Next, you'll need set a percentage width on your columns to allow them to flex and then set a min width of 1000px to your main content column.
.sidecont {
width: 23.1%; /* 300px/1300px */
max-width: 300px;
min-width: 300px;
}
.maincont {
width: 76.9%; /* 1000px/1300px */
min-width: 1000px;
}
Then, you need to set a min and max width on the container to keep it from growing too large and shrinking too small. You'll also need to give it a margin: 0 auto to properly center the container and, since you're using inline-block you'll want to add white-space: nowrap to prevent the columns from wrapping.
.container {
min-width: 1200px;
max-width: 1300px;
margin: 0 auto;
white-space: nowrap;
}
The end result will look like the following:
* {
box-sizing: border-box;
}
a:hover{
color:#ccffcc;
font-weight:bold;
font-size:1.15em;
text-decoration:underline;
}
body{
background-color:gray;
}
.container{
overflow:hidden;
border-width:2px;
border-style:solid;
border-color:blue;
border-radius:25px 25px 25px 25px;
min-width:1200px;
max-width:1300px;
margin: 0 auto;
white-space: nowrap;
}
.topcont{
padding:10px 0px 25px 25px;
background-color:white;
}
.sidecont{
padding: 0px 0px 0px 10px;
display:inline-block;
width: 23.1%;
min-width:200px;
max-width:300px;
background-color:green;
margin:0px;
height: 700px;
}
.maincont{
text-align:center;
display:inline-block;
width: 76.9%;
min-width:1000px;
background-color:black;
color:white;
height:700px;
margin:0px;
}
.bottomcont{
background-color:white;
padding: 0px 0px 25px 10px;
}
<div class="container">
<div class="topcont">
<a href="http://www4.uwm.edu/" target="_blank" >Link One</a> |
<a href="http://www.uwgb.edu/" target="_blank" >Link Two</a> |
<a href="http://www.uwosh.edu/" target="_blank" >Link Three</a> |
<a href="http://www.wisc.edu/" target="_blank" >Link Four</a> |
<a href="http://www.uwec.edu/" target="_blank" >Link Five</a>
</div>
<div class="sidecont">
The sidebar
</div>
<div class="maincont">
Main content of the page goes in this container
</div>
<div class="bottomcont">
Contact information
</div>
</div>
Realistically though, flexbox would be a much better way to go.
You can set the width of the container to fit it in correctly.
try this code
.sidecont{
padding: 0px 0px 0px 10px;
display:inline-block;
mirgin:auto;
background-color:green;
height: 700px;
}
I am trying to build a header similar to this one: http://themes.tf/preview/?momentum
I've set a height but the div still won't get displayed and the content slips to the top.
How can I fix this?
The css is:
.header {
position:relative;
display:block;
width:100%;
z-index:1;
height:688px;
}
.bg-img {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
This is the html:
<div class="header bg-img" style="background-image: url('img/xlheader_s.jpg');">
<img src="img/schwager-baubetruung_logo.png" id="logo" alt="schwager baubetreuung logo">
<nav>
<ul>
<li class="current">Startseite</li>
<li>Über uns</li>
<li>Unsere Arbeit</li>
<li>Galerie</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</nav>
</div>
Here you can see the live version: http://suitsncats.de/index_copy.html
If you go to the index page you can see my previous attempt that worked but had a static header image.
I've looked into the source on your website and encountered two issues:
You've used an id selector (#header) instead of class selector (.header) in your style_copy.css and there's also a syntax error in it (no ; after the height declaration)
#header {
position:relative;
top:0px;
left:0;
height:668px
z-index:1;
}
/* should become: */
.header {
position:relative;
top:0px;
left:0;
height:668px; /* <--- note ; */
z-index:1;
}
In your live version, I've checked out your CSS file style_copy.css and noticed that you tell the CSS to look for #header even though in the HTML you're using .header.
You also forget the ; after the height declaration.
Solution:
Change this in the live version's CSS:
#header {
position:relative;
top:0px;
left:0;
height:668px;
z-index:1;
}
To this:
.header {
position:relative;
top:0px;
left:0;
height:668px;
z-index:1;
}
Hope this helps!
Hi I looked into your source at live website, try following solution:
<div class="header bg-img" style="background-image: url('img/xlheader_s.jpg');">
<img src="img/schwager-baubetruung_logo.png" id="logo" alt="schwager baubetreuung logo">
<nav>
<ul>
<li class="current">Startseite</li>
<li>Über uns</li>
<li>Unsere Arbeit</li>
<li>Galerie</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</nav>
</div>
and CSS:
.header {
position: static;
height: 100px;
width: 100%;
background-color: red;
}
nav {
width: 50%;
height: 30px;
margin: auto;
display: table;
z-index: 2;
text-transform: uppercase;
}
Not exactly how you wanted, but one step closer.
I'm trying to work out the best way using CSS to keep Block 2 centred in the remaining space that exists to the right of Block 1. This space could increase or decrease with the size of the browser window / orientation of device. Block1's position does not move.
I was hoping to be able to use a combination of float, margin-left:auto and margin-right:auto as way of keep Block2 centred, however, sadly my CSS is still in it's infancy.
Any guidance / help would be greatly appreciated.
#block1 {
position:relative;
top:10px;
left:0px;
width:50px;
height:100px;
background-color:#009;
}
#block2 {
position:relative;
width:100px;
height:100px;
top:10px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#999;
}
<div id="block1"></div>
<div id="block2"></div>
http://jsfiddle.net/d4agp0h6/
Thanks in advance
An easier way to do this would be to use nested divs rather than trying to position two within the same block element.
Here's the updated jsFiddle
So, you create a wrapper (#block1) which is the size of the entire page so you can move stuff around inside. Position each subsequent piece of content within this area so you can set margins, position, etc.
HTML
<div id="block1">
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
Then, with your CSS, set the positions relative to one another so you can use margins and percentage spacing to keep things fluid.
CSS
#block1 {
position:relative;
top:10px;
left:0px;
width:200px;
height:400px;
background:#555;
}
#block2 {
position:relative;
width:75%;
height:100%;
float:right;
margin:0 auto;
background-color:#999;
}
#content {
margin:0 auto;
border:1px solid black;
position:relative;
top:45%;
}
#content p {
text-align:center;
}
It appears you want a fixed side bar and a fluid content area.
DEMO: http://jsfiddle.net/fem4uf6c/1/
CSS:
body, html {padding:0;margin:0;}
#side {
width: 50px;
background-color: red;
box-sizing: border-box;
float: left;
height: 500px;
position: relative;
z-index: 1;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 20px 70px;
text-align: center;
}
#box2 {
width: 50%;
height: 300px;
background: purple;
margin: 0 auto;
}
HTML:
<div id="side"></div>
<div class="content">
<p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>
<div id="box2"></div>
</div>
Here is my take on a solution. I used Brian Bennett's fiddle as a base, since I agreed with how he laid out the markup and was going to do something similar myself.
Link to JSFiddle
Where I differed is to add a container section:
<section id='container'>
<div id="block1"></div>
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</section>
I also used percentages to determine widths instead of px values - with the exception of #container. Changing the width of the container should demonstrate that the relevant content is always centered.
Option 1
Here is one of the correct way of putting Block side by side... where one Block is on the Top Left... and the other Block is Top Center
Working Demo 1 : http://jsfiddle.net/wjtnddy5/
HTML
<div id="mainBlock">
<div id="block1">
<div class="box"></div>
</div>
<div id="block2">
<div class="box"></div>
</div>
</div>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
#mainBlock {
height:98%;
width:98.9%;
border:5px solid #000;
}
#block1 {
width:10%;
height:100px;
display:inline-block;
border:1px solid #ff0000;
overflow:hidden;
}
#block2 {
width:89.2%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #ff0000;
display:inline-block;
}
.box {
margin:0 auto;
background-color:#009;
width:100px;
height:100px;
}
Its using the "display:inline-block;" to put Blocks side by side which is better than using Float technique... let me know incase you need only Float!
Option 2
Here is the Other technique using "float: left" incase you need this only...
For this I have just replaced "display:inline-block" with "float: left" for both Blocks.... rest is same..
Working Demo 2 : http://jsfiddle.net/h78poh52/
Hope this will help!!!
Please I have an image as a link to another page and I have a menu of 2 text options (using ul&li) When I use only my image, it works, but when I try to put everything together, my image doesn't link, only the menu works. My code run in Chrome and Explorer, I can't see where the problem is. Someone please help me.
Thanks!
Here my html code:
<body>
<div id="container">
<div id="header">
<div id="home">
<img id="flores" src="images/flores.jpg" alt="home" />
</div>
<div id="connexion">
<section id="formulario">
<p id="titulo">Mi cuenta</p>
<form action="" method="get">
...
</form>
</section>
</div>
<div id="contenido">
<div id="contenido_menu">
<ul>
<li>Rosa</li>
<li>Jasmin </li>
</ul>
</div>
</div>
</div>
</div>
</body>
My css code:
#container{
position: relative;
margin:auto;
margin-top:150px;
width:1024px;
height:768px;
background-color: grey;
}
#header{
margin:auto;
margin-top:0px;
width:1024px;
height: 150px;
}
#home{
position:absolute;
width:624px;
height:150px;
}
#flores {
margin-top:0px;
width:100%;
height:100%;
}
#contenido{
position:absolute;
margin: auto;
width:1024px;
height:438px;
background-color: pink;
}
#contenido_menu{
position: absolute;
margin-top:5px;
background-image: url("img/rosas.jpg");
background-size: 100% 100%;
width:619px;
height:95px;
line-height:95px;
float:left;
}
#contenido_menu ul{
margin: 0 auto;
}
#contenido_menu li{
display:inline;
padding-top: 50%;
padding-bottom: 5px;
}
#contenido_menu a:link, #contenido_menu a:visited{
font-family: Arial;
font-size:19px;
font-weight:bold;
color:#1a53ff;
height:40px;
padding:30px 50px;
text-decoration:none;
}
Only thing I can imagin is that some div or the menu is over the picture. Try to check it with an tag inspector from your debugging tools.
Check your code properly.
In the html you have given the location of flores.jpg as "images/flores.jpg".
While for the other image rosas.jpg, in your css you typed the location as "img/rosas.jpg".
Check whether both images are in their respective folders, or you might have typed one of them wrong.
The problem comes from the below declaration. Remove padding-top:50%. I hope by mistake you put % instead px.
#contenido_menu li{
display:inline;
padding-top: 50px;
padding-bottom: 5px;
}
Also remove position:absolute from #home class.
#home{
/*position:absolute;*/
width:624px;
height:150px;
}
DEMO
You positioned the home and the menu div absolute, if I remove absolute it works fine:
http://jsfiddle.net/2m8rmvuh/
Edit: Linked to an old fiddle, now its the correct one ;)
#home{
width:624px;
height:150px;
}
#contenido{
margin: auto;
width:1024px;
height:438px;
background-color: pink;
}
#contenido_menu{
margin-top:5px;
background-image: url("img/rosas.jpg");
background-size: 100% 100%;
width:619px;
height:95px;
line-height:95px;
float:left;
}
I dont know if thats the look you want, but if you give them the attribute absolute, they are overlapping, if you use a large picture.
Since last week I am again trying to make a website after an absence of about 2 years. It went pretty well until I noticed that when I minimize the browser, the content does not stay in the wrapper.
I have been looking for solutions on this website and on google but I cant seem to find the right one. Most solutions mention problems with #float and overflow but I do not use float (hope that this is not the problem) and I have been playing with the overflow but I cant get it to work.
Below you can find the CSS and HTML code I used.
The HTML:
<div id="wrapper">
<div id="content">
<div id="header">
<div id="logo">
<img src="style/images/logo.gif" width="184" height="73" alt="logo" />
</div>
<div id="menu">
<ul id="navlist">
<li id="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<div id="main">
Title
subtitle
</div>
<div id="footer">
<div id="left_banner">
</div>
<div id="right_banner">
</div>
</div>
</div>
</div>
and the CSS
html, body, ul, li {
margin:0px;
padding:0px;
height:100%;
}
#wrapper {
text-align: center;
background:url(images/bg.gif);
background-repeat:repeat;
height:100%;
width: 100%;
overflow:auto;
}
#content {
background-color: #fff;
margin: 0px auto;
width: 780px;
height: 100%;
border-left:#fd5d78 4px solid;
border-right:#fd5d78 4px solid;
}
#header {
position:relative;
height:120px;
}
#logo {
position:absolute;
right:43px;
top:37px;
}
#menu {
position:absolute;
bottom:0px;
left:58px;
}
#main {
position:relative;
left:25px;
top:35px;
width:730px;
height:320px;
}
#footer {
position:relative;
width:730px;
left:25px;
top:70px;
background-color:#0F0;
clear:both;
}
#left_banner {
position:absolute;
left:0px;
width:349px;
height:134px;
border:#fd5d78 2px solid;
background-color:#FFF;
}
#right_banner {
position:absolute;
right:0px;
width:349px;
height:134px;
border:#fd5d78 2px solid;
background-color:#FFF;
}
Thanks a mil for your help.
Try adding display:block; to the #wrapper
jsfiddle
I know you said you don't use floats, but here is a solution using them. One of the biggest problems you had was you were setting the two footer banners to absolute positions, which throws off the 100% height on the parent div. With floats and overflow:hidden you are able to bring those divs back into the 100% calculation.
I had to make many changes to your css, so take what I have in the jsfiddle as your starting point.