Sorry if this was asked before but I read and did not see my mistake.I try to center the #wrapper with margin:0 auto; but nothing happens...the width is set also.
This is the CSS:
I want the hole page to be centerd
#charset "utf-8";
body {
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
padding:0;
background-color:#000000;
text-align:center
}
#wrapper {
width: 901px;
***margin: 0 auto;***
}
#header {
background-image: url(images/banner.jpg);
background-repeat: no-repeat;
float: left;
height: 233px;
width: 901px;
}
#menu {
font-family: Arial, Helvetica, sans-serif;
background-image: url(images/menu.gif);
background-repeat: no-repeat;
text-align: center;
word-spacing: 70px;
padding-top: 17px;
float: left;
height: 33px;
width: 901px;
}
#main {
float:left;
height:auto;
width:901px;
}
#leftcol {
float:left;
height:auto;
width:300px;
padding-top:5px;
padding-right:0px;
padding-bottom:0px;
padding-left:30px;
}
#rightcol {
float:right;
height:auto;
width:500px;
padding-right:35px;
margin-right:0px;
}
#footer {
font-family:Arial, Helvetica, sans-serif;
font-size:x-small;
float:left;
height:250px;
width:900px;
color:#666666;
clear:both
}
Also the html:
this is the basic html file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">Content for id "wrapper" Goes Here</div>
<div id="header">Content for id "header" Goes Here</div>
<div id="menu">Content for id "menu" Goes Here</div>
<div id="main">
<div id="leftcol">Content for id "main" Goes Here</div>
<div id="rightcol">Content for id "rightcol" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>
You need to give body (your element's parent) a width :
html, body{
width:100%;
}
Besides, considering your markup, if you want the whole site to be centered, you should use your #wrapper as an actual wrapper, meaning it should include the other content nodes :
<body>
<div id="wrapper">
<div id="header">Content for id "header" Goes Here</div>
<div id="menu">Content for id "menu" Goes Here</div>
<div id="main">
<div id="leftcol">Content for id "leftcol" Goes Here</div>
<div id="rightcol">Content for id "rightcol" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</div>
</body>
Related
I have a row split in 4 columns on a footer section, in the last column to the right I want to add something like the picture attached, but I want to preserve the look of the image and text together along all screens sizes, with what I have only works for smaller screens, and the wider the screen gets, the image and the text separate each other apart too much. How can I achieve this?
.wrapper {
position:relative;
text-align:center;
margin:0 auto;
}
.footer {
font-size:40px;
color:black;
}
.talk {
position:absolute;
text-align:left;
bottom:0;
}
.footer-logo {
vertical-align: bottom;
float:right;
height:150px !important;
}
<div class="wrapper">
<p class="footer talk">Big Text</p>
<img class="footer-logo" src='http://via.placeholder.com/140x100'>
</div>
you can simply set the display of 'image' and the 'text' element to :inline
or chage the < p > tag to < span >,
because < p > tag takes the whole line and they couldn't take place together!
but < span > tag is an inline element which takes the content width (and not the screen width)
here is a useful explanation about "display" property.
.wrapper {
display: block;
position:absolute;
right:0;
bottom:0;
text-align:center;
margin:0 auto;
}
.footer {
display: inline;
}
.talk{
font-size:40px;
color:black;
}
.logo{
height: 150px;
width: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrapper">
<span class="footer talk">Big Text</span>
<img class="footer logo" src='http://via.placeholder.com/140x100'>
</div>
</body>
</html>
You can try This Code.
I'am add some media queries and some div to in html page
Html
<div class="wrapper">
One Columns
</div>
<div class="wrapper">
two Columns
</div>
<div class="wrapper">
three Columns
</div>
<div class="wrapper">
<div class="A">
<p class="footer talk">Big Text</p>
<img class="footer-logo" src='http://via.placeholder.com/140x100'>
</div>
</div>
CSS
.wrapper {
position:relative;
text-align:center;
margin:0 auto;
width:25%;
float:left;
}
.footer {
font-size:40px;
color:black;
}
.talk {
position:absolute;
text-align:left;
width:50%;
float:left;
}
.footer-logo {
vertical-align: bottom;
float:right;
height:150px !important;
width:50%;
float:right;
}
.A{
width:100%;
}
#media (max-width:525px){
.A{
width:100%;
}
.footer-logo {
width:20%;
float:right;
}
.talk {
width:20%;
float:left;
font-size:28px;
}
}
I'm new to HTML / CSS. I want to build a web site but I stumbled across a problem.
My divs inside my "content div" have a blank space at the top from the line div, and I can't seem to figure out what is causing the problem. Can someone please help? I will much apreciate it.
Thank you!
<head>
<meta charset="utf-8">
<title>Vlad Olar</title>
<style type="text/css">
body {
padding:0;
margin:0;
font-family:Lato, Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
background-color:#D8DCE1;
}
.clear {
clear:both;
}
.fixedwidth {
width:960px;
margin:0 auto;
padding:0 0;
}
#topbar {
background-color:#4C7585;
height: 40px;
width: 100%;
}
#front {
height: 360px;
width: 100%;
background-color:#D8DCE1;
}
#line {
height:10px;
width:100%;
background-color:#4C4C4C;
}
#foto {
height:120px;
width:120px;
background-color:#4C4C4C;
border-radius:60px;
z-index:3;
float:left;
position:relative;
top:-55px;
margin-left:103px;
}
#gaming {
height:120px;
width:120px;
background-color:#4C4C4C;
border-radius:60px;
z-index:3;
float:right;
position:relative;
top:-55px;
margin-right:103px;
}
#design {
height:120px;
width:120px;
background-color:#4C4C4C;
border-radius:60px;
z-index:3;
float:left;
position:relative;
top:-55px;
margin-left:198px;
}
#content {
margin:0;
padding:0;
}
#fotocontent {
background-color:#A48251;
height:500px;
width:320px;
float:left;
}
#designcontent {
background-color:#D1A366;
height:500px;
width:320px;
float:left;
}
#gamingcontent {
background-color:#A48251;
height:500px;
width:320px;
float:left;
}
#footer {
background-color:#4C7585;
height: 40px;
width: 100%;
}
#container {
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
</div>
</div>
<div id="front">
</div>
<div id="line">
<div class="fixedwidth">
<div id="foto">
</div>
<div id="design">
</div>
<div id="gaming">
</div>
</div>
</div>
<div class="clear">
</div>
<div id="content">
<div class="fixedwidth">
<div id="fotocontent">
</div>
<div id="designcontent">
</div>
<div id="gamingcontent">
</div>
</div>
</div>
<div class="clear">
</div>
<div id="footer">
<div class="fixedwidth">
</div>
</div>
</div>
</body>
As #HiddenHobbes wrote you have the problem because of #foto, #design and #gaming are pulling down .clear div (remove top: -55px; and you will see it).
If you do not want to recalculate margins you can wrap those block in some wrapper with position: absolute; to prevent pulling down behaviour on next div.
In your html
<div id="line">
<div class="fixedwidth">
<div class="foowrapper">
<div id="foto"></div>
<div id="design"></div>
<div id="gaming"></div>
</div>
</div>
</div>
And in your css
.foowrapper {
position: absolute;
width: 100%;
}
.fixedwidth {
position: relative;
}
Fiddle demo
I know your new to html and css but you realy need to make your css in a different file, to do this use <link rel="stylecheet" href="style.css">
Also you should start every html file with this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
(content)
</body>
</html>
But to anwser your question:
"My divs inside my "content div" have a blank space at the top from the line div"
This can easly be solved by given the div a margin-top:-(x)px;
I need css code for this kind of site:
And with my code I get this:
This is my code of index page:
<html>
<head>
<link type="text/css" rel="stylesheet" href="index.css"/>
<title>
Home Page
</title>
</head>
<body>
<div id=header>
<h1>THIS IS HEADER</h1>
</div>
<div id=account>
THIS IS ACCOUNT<br>
oasdjasdj<br>
asdkasd<br>
asdpasod<br>
</div>
<div id=navigation>
THIS IS NAVIGATION
</div>
<div id=content>
THIS IS CONTENT
</div>
<div id=right_side>
THIS IS RIGHT SIDE
</div>
<div id=footer>
THIS IS FOOTER
</div>
</body>
This is css file:
h1{
font-family: Verdana;
font-weight: bold;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
color: #acd1b2;
}
#header{
margin : 0px;
position: relative;
width:80%;
background-color: red;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#navigation{
margin : 0px;
width:80%;
background-color:blue;
}
#right_side{
width: 20%;
float: right;
background-color: #green;
}
#footer{
clear: both;
position: relative;
width:80%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background-color: gray;
}
#account{
position: relative;
width: 20%;
float: right;
background-color: #yellow;
}
#content{
width:80%;
float:left;
background-color:#black;
color: white;
}
Please if someone know how to position divs like on my first picture. When I try something I always get strange results. Thanks for help!
Alright, there were a few problems with the way that you wrote your HTML. First, ID tags should always have quotations around the ID name. I would just make a container div, a div for the left, and a div for the right side.
I made a demo that uses floats to control the layout. The divs are contained in a large div that is restricted to 800 pixels.
Here's the demo that I made on JS Bin
HTML:
<body>
<div id="container"> <!-- Make a container to hold everything. Centered in CSS -->
<div id="left-side">
<div id="header">Header</div>
<div id="navigation">Navigation</div>
<div id="content">Content Here</div>
<div id="footer">Footer</div>
</div> <!-- End of the left side div -->
<div id="right-side">
<div id="account">Account</div>
<div id="right_side">Right Side</div>
</div> <!-- End of the right side div -->
</div> <!-- End of the container div -->
</body>
CSS:
*{
font-family:sans-serif;
}
#container{
max-width:800px;
margin: 0 auto;
}
#left-side{
float:left;
width:60%;
}
#right-side{
float:right;
width:37%;
}
#left-side div{
text-align:center;
margin-bottom:10px;
}
#right-side div{
text-align:center;
margin-bottom:10px;
}
#header{
background-color: yellow;
text-align:center;
padding:20px 0px;
}
#navigation{
padding:10px 0px;
border: 1px black solid;
}
#right_side{
background-color: cyan;
padding:50px 0px;
}
#footer{
background-color: gray;
padding:5px 0px;
}
#account{
background-color: green;
padding: 10px 0;
}
#content{
background-color:black;
color: white;
padding:100px 0px;
}
Change HTML as follow because you need container divs:
<head>
<link type="text/css" rel="stylesheet" href="index.css"/>
<title>
Home Page
</title>
</head>
<body>
<div class="left_container">
<div id=header>
<h1>THIS IS HEADER</h1>
</div>
<div id=account>
THIS IS ACCOUNT<br>
oasdjasdj<br>
asdkasd<br>
asdpasod<br>
</div>
<div id=navigation>
THIS IS NAVIGATION
</div>
<div id=content>
THIS IS CONTENT
</div>
<div id=footer>
THIS IS FOOTER
</div>
</div>
<div class="right_container">
<div id=right_side>
THIS IS RIGHT SIDE
</div>
</div>
</body>
in CSS file add also
.left_container{float:left;width:80%;margin:0px}
.right_container{float:left;width:20%;margin:0px}
.clr{clear:both}
Something like this perhaps?, learn about CSS class'es there reusable (incase you might want multiple right side box's and it will shorten the CSS code because you dont need to create a selector for every element.
Copy and paste source - change to suit...
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
* {
margin:0;
padding:0;
}
#wrapper {
width:800px;
height:100%;
margin:0 auto;
}
#wrap-left {
width:75%;
height:100%;
float:left;
}
#wrap-right {
width:25%;
height:100%;
float:right;
}
#header,#navigation,#footer,.right-small {
height:45px;
margin:10px;
}
#content,.right-tall {
height:230px;
margin:10px;
}
.round-corners {
-webkit-border-radius:25px;
-moz-border-radius:25px;
border-radius:25px;
padding:20px;
}
.bg-yellow {
background:#FEF200;
}
.bg-red {
background:#ED1B24;
}
.bg-blueish {
background:#3F47CC;
}
.bg-green {
background:#23B14D;
}
.bg-grey {
background:#C3C3C3;
}
.border {
border:5px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="wrap-left">
<div id="header" class="bg-red round-corners">
<h1>THIS IS HEADER</h1>
</div>
<div id="navigation" class="bg-blueish round-corners">
THIS IS NAVIGATION
</div>
<div id="content" class="border round-corners">
THIS IS CONTENT
</div>
<div id="footer" class="bg-grey round-corners">
THIS IS FOOTER
</div>
</div>
<div id="wrap-right">
<div class="right-small bg-yellow round-corners">
ACCOUNT
</div>
<div class="right-tall bg-green round-corners">
left side
</div>
</div>
</div>
</body>
</html>
why no use a table
<body>
<table width="100%" cellspacing=5 cellpadding=5 border =0 >
<tr><td bgcolor=red width="80%" height=200px> header </td> <td bgcolor=yellow>account</td> </tr>
<tr><td bgcolor=blue height=100px> navigation </td> <td bgcolor=green rowspan=2>Left side</td> </tr>
<tr><td bgcolor=cyan height=400px> content </td></tr>
<tr><td bgcolor=grey height=100px> footer </td></tr>
</table>
</body>
you don't need css for that..
I have a footer div that is just a solid colour that I would like to sit at the bottom outside of my container DIV which is called 'mainhome'. I would like it to stretch the entire site. It just keeps sitting on top of my banner - I'm getting lost in the code now so maybe i have just missed something small?
Thank you in advance
MY HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="mainhome">
<div class="header">
<div class="menubutton-leftside" style="margin-right:23px"><h2>home</h2></div>
<div class="menubutton-leftside" style="margin-right:20px"><h2>about</h2></div>
<div class="menubutton-leftside" style="margin-right:30px"><h2>portfolio</h2></div>
<div class="menubutton-leftside" style="margin-right:27px"><h2>contact</h2></div>
<div class="logo"><img src="images/es-logo.png" width="170" height="170" /></div>
<div class="menubutton-rightside" style="margin-left:17px"><h2>print</h2></div>
<div class="menubutton-rightside" style="margin-left:25px"><h2>digital</h2></div>
<div class="menubutton-rightside" style="margin-left:38px"><h2>illustration</h2></div>
<div class="menubutton-rightside" style="margin-left:20px"><h2>brand</h2></div>
</div>
<div class="mainimage">
<div id="slider_container">
<div id="slides">
<img src="images/slider/emmasteed.png" alt="Emma Steed Graphic Art and Web Design" />
<img src="images/slider/graphicdesign-desk.png" alt="Emma Steed Graphic Art and Web Design" />
</div>
</div>
<div class="bluebar"></div>
<div class="largemenubutton" style="margin-right:36px"><img src="images/portfolio.png" /></div>
<div class="largemenubutton" style="margin-right:36px"><img src="images/getintouch.png" /></div>
<div class="largemenubutton"><img src="images/aboutme.png" /></div>
</div></div>
<div class="footer"></div>
</body>
</html>
MY CSS
#charset "UTF-8";
/* CSS Document */
body {
background-image:url(images/header-background.png);
background-repeat:repeat-x;
margin:0;
padding:0;
}
.mainhome {
width: 855px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.header {
height: 236px;
background-image:url(images/header-background.png);
background-repeat:repeat-x;
clear:left;
}
.mainimage {
width: 855px;
height: 423px;
background-color:#0C9;
position:absolute;
top:220px;
float:left;
z-index:-1;
}
#slider_container {
width:855px;
height:423px;
overflow:hidden;
}
.bluebar {
width: 855px;
height: 16px;
background-color:#334d5c;
clear:left;
float:left;
}
.menubutton-leftside {
width:60px;
height:20px;
float:left;
margin-top:95px;
}
.menubutton-rightside {
width:60px;
height:20px;
float:left;
margin-top:95px;
text-align:right;
}
h2 {
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:normal;
color:#666;
display:inline;
}
.logo {
width:170px;
height:170px;
float:left;
margin-top:30px;
}
.largemenubutton {
width:261px;
height:259px;
float:left;
margin-top:20px;
}
.footer {
width:100%;
height: 61px;
background-color:#334d5c;
clear:left;
}
It doesn't look like .nameimage needs to be absolutely positioned, but it depends on what you want it to do. Rough example: http://codepen.io/anon/pen/oAbJy.
likely the easiest thing to do, if you ALWAYS want that to be at the very bottom is just give it a fixed position. Add the following to your CSS for the footer. (you may also have to set height and width on the body to 100%)
position: Absolute;
bottom: 0px;
I have a html page I'm working on. I have a div called "featuredcontent" that I'm going to add an N number of elements with class "item" to. I want the featuredcontent box to scroll horizontally when I exceed the space in the layout. Sort of like iTunes does their songs. My problem is when I try to do this and define the boxes to be a certain width they don't expand properly. Here's my rough draft of the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
padding:0px;
margin:0px;
font-family:Arial, Helvetica, sans-serif;
}
#container {
width:990px;
margin-left:auto;
margin-right:auto;
}
#header {
margin-top:20px;
text-align:left;
overflow: auto;
}
#featured {
width: auto;
float: left;
text-align: left;
}
#navbar {
padding-top:5px;
}
#navbar a {
color:#000;
padding-right:40px;
font-weight:bold;
text-decoration:none;
font-size:20px;
}
#navbar a:hover {
text-decoration:underline;
}
#logo {
width:290px;
height:250px;
float:right;
vertical-align:50%;
background:url(logo.jpg);
}
#main {
margin-top: 30px;
}
#mainfeature {
overflow:auto;
white-space:nowrap;
}
.item {
width:150px;
height:300px;
margin-right:10px;
color:#0FF;
display:inline;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="featured">
<img width="700" height="225" src="#" />
<div id="navbar">LinkLinkLinkLink</div>
</div>
<div id="logo"></div>
</div>
<div id="main">
<div id="mainfeature">
<div class="item"> asdf</div>
<div class="item"> adsf</div>
<div class="item"> adf</div>
<div class="item"> ad f</div>
<div class="item"> adsdfewsgewt</div>
</div>
<div id="secondaryfeature"></div>
<div id="socialbar"></div>
</div>
<div id="footer"></div>
</div>
</body>
I think its navbar that needs to scroll. It also needs a width:
#navbar {
width: 990px;
padding-top:5px;
overflow-x: auto;
}
If you want to have a custom scrollbar, I think you can look to jScrollPane. (http://jscrollpane.kelvinluck.com/)
The CSS property "overflow-x" is a good answer, but I hate the default scrollbars. ;)
Give that a try:
#featured {
overflow-x: scroll;
}