I am playing around with webdesign, I always assumed that div's that are positioned relative, always are ordered in the way they are coded. But now I have a div that jumps above another although they are both relative.
A screenshot of the problem:
Here is the code of my index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/layout.css">
<link rel="stylesheet" type="text/css" href="CSS/nav.css">
<meta name="description" content="Website template 1">
<meta name="keywords" content="template">
<meta name="author" content="">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="MainContainer">
<div id="HeaderContainer">
<div id="NavigatieContainer">
<ul id="nav">
<!-- LVL 1 -->
<li>
Home
</li>
<li>
About
</li>
</ul>
</div>
</div>
<div id="BodyContainer">
<p>test</p>
</div>
</div>
</body>
</html>
And here is the code of my layout css:
/*Basic tags*/
body {
background-color: #efebdf;
}
/*DIV ID's*/
div#MainContainer {
width: 60%;
margin-left:auto;
margin-right:auto;
}
div#HeaderContainer {
position: relative;
}
div#NavigatieContainer {
float: right;
}
div#BodyContainer {
position: relative;
background-color: brown;
}
and the code of my navigation css so far, although I don't think the problem is here:
a {
color:#333333;
}
#nav {
/*-webkit-box-shadow:rgba(0, 0, 0, 0.4) 0 1px 3px;*/
border-radius: 0.3em;
position: relative;
z-index: 5;
}
#nav li {
margin-right: 10px; /*spacing tussen de list items*/
float:left;/*zorgt voor naast elkaar te plaatsen*/
list-style:none;/*Haalt list bolletjes weg*/
position:relative;
border-radius: 0.3em;
background-color: #e2e0d3;
}
#nav a {
color:black;
display:block;
font-weight:bold;
margin:0;
padding:8px 20px;
text-decoration: none;
}
#Adrift almost got it right, but he mentioned the wrong div. The overflow property should be on the HeaderContainer.
div#HeaderContainer {
position: relative;
overflow: auto;
}
I've created a jsfiddle for you with the result. You might want to add it to any following questions as it allows us to easier detect the problem.
http://jsfiddle.net/7Kx9g/
A little more background informations; once an image floats it is no longer in the document and therefor does not reserve it's own height. A trick called clearfix can be used to prevent it, but it's an advanced way of using overflow: auto; or overflow: hidden;
Do you know how to use inline-block? IMO, it's much easier to organize things with display:inline-block; than to use floats, because float makes it ignore several CSS rules, and the larger your project becomes, the more troublesome this "rule-ignoring" has the POTENTIAL to become.
The problem is caused by the float. Put clear:both; in the css for div#BodyContainer.
Look here. http://jsfiddle.net/aKy67/
Total agree #HC_
Related
The problem that I have with my code is that the <p>Welcome to my Profile</p> will not center. I've tried using Bootstrap's text-center class but it doesn't work desirably. I've also tried multiple things like using text-align: center; in CSS and even using width: 100%; for both the header and the div. Are there any solutions? Thanks in advance.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jane's Personal Profile</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Jane Doe</h1>
<ul>
<li>Social Media</li>
<li>Portfolio</li>
</ul>
</header>
<div class="row">
<div class="span8 offset2 text-center">
<p>Welcome to my Profile</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
header {
height: 75px;
padding-left: 10px;
box-shadow: 5px 5px 10px grey;
width: 100%;
}
header > h1 {
float: left;
}
ul {
display: table-row;
float: right;
list-style: none;
}
ul > li {
display: table-cell;
vertical-align: middle;
height: 70px;
padding: 10px;
padding-right: 20px;
font-size: 16px;
}
h1 {
font-family: 'Abril Fatface', cursive;
}
Looks like you're using "text-center" as a class. Unless you set your CSS to recognize the class, there is nothing for the CSS to do.
Try adding this to your CSS
.text-center {
text-align: center;
}
You should always provide a jsFiddle for problems like this, btw ;)
If Bootstrap has a class setting the paragraph element to align left, you may also need to change the paragraph to a div. Alternatively, you could add a class to the paragraph such as "center-me" and add CSS
p.center-me {
text-align: center;
}
Bootstrap adds a giant bunch of CSS. Make sure, when you are using Bootstrap, to check if it has CSS styles that are affecting what you want to accomplish. Most browsers contain a developer's window where you can see what styles are being applied to any window. In Chrome, you can right click on any element and select "Inspect" to pull up this window and see both the HTML and the styles that are being applied from any CSS source.
Pretty noob question I'm sure. I ran into this problem when attempting to change the background color in a more complex webpage, so I started from scratch and still can't figure it out. Here's the simplified page
My goal is to set the background color of the site, but doing so with body had no effect, even when I had it filled with content. So I tried setting the background color and instead ran into a whole new problem. The header is not at the top of the site, since there's an unwanted space above the body element itself. I've tried setting everything to margin 0 and padding 0 to no effect. Here is my code:
html {
background-color: green;
}
.body {
padding: 0;
margin: 0;
}
#logo {
font-size: 2rem;
border-right: 1px solid grey;
color: green;
}
header {
border-bottom: 1px solid grey;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="css/style.css">
<meta name="description" content="blah">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<p id="logo">Path</p>
</header>
<section class="hero">
</section>
<section class="content">
<p>hi</p>
</section>
</body>
</html>
have you tried "body" instead of ".body"?
Try :
#logo {
margin-top: 0px ;
}
body {
padding: 0px;
margin: 0px;
}
Try add This in your CSS:
html,body,header,section,p{
padding:0;
margin:0;
border:0;
}
it Works, No unwanted space.
here the fiddle :https://jsfiddle.net/osrrwrqn/
Use
html,body{
padding:0;
margin:0;
}
I am currently working on a practice example website as part of my Computer Science GCSE course. I am having real trouble with the navigation CSS. The website is very much in progress, so I know it's not great, but here is my code:
<!DOCTYPE html>
<html>
<head>
<title>The Cotswold Jeweller</title>
<link rel="stylesheet" href="../Assets/css/normalize.css" media="screen" type="text/css">
<link rel="stylesheet" href="../Assets/css/main.css" media="screen" type="text/css">
<link rel="stylesheet" href="../Assets/css/grid.css" media="screen" type="text/css">
</head>
<body>
<div class="head">
<h1>The Cotswold Jeweller</h1>
</div>
<div class="nav_contain">
<ul class="nav">
<li><h2>Home</h2></li>
<li><h2>Services</h2></li>
<li><h2>Location</h2></li>
</ul>
</div>
<div class="wrapper">
<p>Welcome to the home of The Cotswold Jeweller on the web. Here at The Cotswold Jeweller we offer a unique and reliable service to create a friendly and local experience for our customers. We are very proud to also stock products from many different popular and large groups, such as Citizen, Butler and Peach and many more while we still maintain our local, reliable ethos.</p>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=The+Cotswold+Jeweller,+Granville+Court,+Shipston-on-Stour&aq=0&oq=The+Cotswold+Jewe&sll=52.8382,-2.327815&sspn=8.08612,21.643066&ie=UTF8&hq=&hnear=&ll=52.062826,-1.623898&spn=0.006295,0.006295&t=m&iwloc=A&output=embed"></iframe>
</div>
<div class="footer">
<p>Copyright 2014 © The Cotswold Jeweller</p>
</div>
</body>
</html>
And here is the CSS:
body {
background-color: #FFFFFF;
}
.wrapper {
width: 1100px;
margin: auto;
}
.head {
text-align: center;
font-family: "Times New Roman";
font-size: 32px;
}
.nav li h2 a {
text-decoration: none;
color: #000000;
font-family: "Times New Roman";
width: 366px;
float: left;
}
.nav {
list-style: none;
width: 1100px;
margin: auto;
text-align: center;
}
.nav_contain {
border-top: 5px #990000 solid;
border-bottom: 5px #990000 solid;
}
I would like to have the navigation bar between, the two borders of the navigation container, but they are not aligned properly. Please can you provide a solution below. Thank You.
You can add overflow: auto to the .nav container. This will prevent its height from collapsing because it only contains floated elements.
.nav {
list-style: none;
width: 1100px;
margin: auto;
text-align: center;
overflow: auto;
}
Alternatively, adding this to .nav_contain has a similar effect.
Add this
.nav li{
display:inline-block;
}
and remove the h2 tags.
You may also have to reduce the size of the "a" tags to get them to stay in a line on screen. I'm on a 1280px monitor at the moment and I had to reduce their width to 300px.
Another alternative is to just remove the li tags completely. The links should still display side by side, and because your borders are outside of ".nav" then they should contain it.
If it doesn't work, just let me know.
generally try to avoid fixed values like
width: 1100px; //(1)
you can replace it for example by
width: 90%; //(2)
the (1) is destroying your site on other resolution than yours. Use (2) to avoid it.
try this code:
http://paste.debian.net/69881/
I am designing a website for my father and so far I'm midway the index page only.
What is bugging me that when I zoom out to around 30% (just for tests sake) The divs are broken and they end up out of place (will show you an example). Also even the divs do not stay as one "whole entity"
I tried basically everything, the min-width (which is 965px). Is there a way to make it round up Percentage wise sort of? If so, how can it be made considering that the width max-width has to be 965px?
My website is mainly for PCs.
Also I am using HTML5 and CSS3
There is one outer div which puts the whole body into a "box"
Warning: My header is in a PHP so is the footer and then I just load them. I will be posting both the header.php and the generalbackground CSS
The CSS Code is this:
#charset "utf-8";
/* CSS Document */
body
{
background:url(pics/bg.jpg) no-repeat center center fixed;
background-color:#282828;
font-family: 'Sancreek', cursive;
min-width:965px;
margin: 0 auto;
}
.bodyoutline
{
min-width:100% ;
}
div.upperbody
{
background:url('pics/topbg.png') no-repeat center center;
width:965px;
height:100px;
margin: 0 auto;
}
div.body
{
background:url('pics/divbg.png') no-repeat center center fixed;
width:965px;
height:1304px;
margin: 0 auto;
margin-top:-25px;
}
div.header
{
background:url('pics/header.png');
width:965px;
margin: 0 auto;
height: 319px;
overflow:hidden;
}
div.logo
{
background:url('pics/logo.png');
width: 220px;
height: 215px;
float:left;
margin-left:20px;
margin-top:20px;
}
div.groupPhoto
{
background:url('pics/group.png');
float:right;
margin-right:30px;
width:552px;
height:244px;
margin-top:30px;
transform: rotate(12deg);
-ms-transform: rotate(12deg); /* IE 9 */
-webkit-transform: rotate(12deg); /* Safari and Chrome */
}
div.mainContent
{
width:965px;
margin: 0 auto;
float:left;
}
div.menuLinks
{
width:965px;
margin: 0 auto;
text-align:center;
}
ul,li.menuLinks
{
width:965px;
margin: 0 auto;
display:inline;
font-size: 38px;
padding: 10px;
color: #39100a;
font-weight:bold;
}
div.separator
{
width:965px;
text-align:center;
margin:0 auto;
height:50px;
}
div.box
{
width:965px;
margin: 0 auto;
}
div.updec
{
background:url('pics/updec.png') center no-repeat;
width: 965px;
height: 202px;
}
h1.titles
{
margin-left:75px;
font-size:30px;
}
h1.ePhotos
{
float:left;
font-size:18px;
text-decoration:underline;
margin-left:25px;
}
.position
{
margin-left:90px;
margin-top:-130px;
}
a:visited
{
text-decoration:none;
color:#000;
}
a:hover
{
text-outline:#000;
outline-color:#000;
outline-width:2px;
margin: 0 auto;
}
header.php
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Copyright" content="© Dorienne Grech (DodoSerebro), All Rights Reserved ">
<meta name="description" content ="Forever Friends Official Website. All the Latest Dances Walkthroughs, Videos of Recent Events, Photos, Contacts and More regarding Forever Friends Linedancers will be found here!, latest Dances">
<meta name="keywords" content="">
<title>Forever Friends Lineadancers Official Site</title>
<link rel="stylesheet" type="text/css" href="generalbackground.css">
<link rel="stylesheet" type="text/css" href="accordion.css">
<link href='http://fonts.googleapis.com/css?family=Sancreek' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="bodyoutline">
<div class="upperbody"></div>
<div class="body">
<div class="header"> <!-- Header containing Logo and Group Photo -->
<div class="logo"></div> <!-- Logo -->
<div class="groupPhoto"></div> <!-- end of groupPhoto -->
</div> <!--End of header -->
<div class="mainContent"> <!--Main Body Consisting of Links / Video/Photo and others -->
<div class="menuLinks"> <!-- Menu Links -->
<ul class="menuLinks">
<li class="menuLinks">Home</li>
<li class="menuLinks">About</li>
<li class="menuLinks">Dances</li>
<li class="menuLinks"> Videos </li>
<li class="menuLinks">Events </li>
<li class="menuLinks">Contact</li>
</ul>
</div> <!-- end of mainContent -->
Result of Zooming out to 30%
http://imageshack.us/photo/my-images/571/y1bw.jpg/
PS: BROWSER Currently Testing and using is GOOGLE CHROME: Version 29.0.1547.66 m
thanks
best practice would be
.bodyoutline
{
position: relative;
min-width: 1366px;
max-width: 2048px;
margin: 0px auto;
width: 100%;
}
This will make your all elements be in the div and always aligned regardless of zoom-in or zoom-out.
What I found best people is to use the MEDIA QUERIES
By Simply adding
#media (max-width: 600px)
{
//All the CSS [classes] to be effected by the change in screen will be written here for e.g
h1
{
font-size:20px;
}
}
When the screen is 600px or smaller (or zoomed out) the font-size of h1 will change to 20px whereas ALL the other CSS will stay as originally written (as it is the parent)
In other words:
Media queries will ONLY affect those classes written between the media queries (will overwrite the original)
In light of the answers to the original question I had, I have amended my code. I was hoping if someone could tell me if this is a better approach in comparison. My original post and code is below.
UPDATED CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content= "" />
<title>Example</title>
<base href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrapper {
}
#header {
background-image: url('images/bg-inner-page.gif');
height: 200px;
}
#logo {
float: left;
margin-top: 50px;
margin-left: 100px;
}
#topnav {
float: right;
margin-top: 50px;
margin-right: 1250px;
}
#topnav ul {
word-spacing: 10px;
}
#topnav ul li {
list-style-type: none;
display: inline;
}
#content {
background-color: orange;
}
#footer {
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
logo
</div>
<div id="topnav">
<ul>
<li>home</li>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
ORIGINAL POST
I am new to the world of coding as well as CSS. I am attempting to line up CSS elements however unaware how I can place some sort of lines to get the exact line-height, position, etc. I attempted to use FireBug however to no avail. Is there some of tool I can use that possible places a grid over the canvas?
EDIT
Here is a sample of the code I am working with.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content= "" />
<title>Example</title>
<base href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#wrapper {
}
#header {
background-image: url('images/bg-inner-page.gif');
height: 200px;
}
#logo {
width: 20px;
position: relative;
top: 50px;
left: 100px;
}
#topnav {
width: 500px;
position: relative;
top: 14px;
left: 150px;
}
#topnav ul {
word-spacing: 10px;
}
#topnav ul li {
list-style-type: none;
display: inline;
word-spacing: 10px;
}
#content {
background-color: orange;
}
#footer {
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
logo
</div>
<div id="topnav">
<ul>
<li>home</li>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
It is generally inadvisable to do pixel-by-pixel layout in webpages. You can never tell with which browser, which resolution on which platform and with which fonts installed your future customer will view the page.
Use HTML and CSS to specify a logical layout of the document. Tell the rendering machine, which parts have enphasis, which are less important and so on and let the renderer decide how to represent it the best way on the target display and UI-theme.
If you start worrying about pixel-exact line heights, your page most probebly will look swell on one browser, in one resolution on one platform and in the rest of the world like turd.
Move from physical mark-up to logical mark-up.
The Web Developer Extension for firefox ( http://chrispederick.com/work/web-developer/ ) has a grid function.
Alternatively, in html/css, you can create an overlaying, full-screen div with a grid background to give you the visual, but its not the best solution since you'd also have to make it the highest z-index element, or make all other elements have a background of transparent, which could screw with your design.
Highly suggest just using the plug in, you don't want to mix in html/css just as a developer tool too much.
<subjective>Whilst I agree with the sentiment of "don't do pixel-level design", sometime the requirements of the project demand it. Using a reset css like YUI-reset is one of the better ways to have most browser renderings consistent, but also requires you have stye declarations for all the elements from the ground up. </subjective>
I agree with Hyperboreus above, trying to make the site exactly the same in all browsers is a recipe for a headache.
But, I've often used xscope (http://iconfactory.com/software/xscope) to overlay guidelines and grids on my mac to line things up. It's not free, but it's well worth the $25.
Edit: Just saw your code. If you're just trying to get the logo and nav on the same line, try something like this:
<title>Example</title>
<base href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#header {
background-image: url('images/bg-inner-page.gif');
height: 200px;
}
#logo {
width: 20px;
float: left;
margin-top: 50px;
margin-left: 100px;
}
#topnav {
width: 500px;
margin-left: 150px;
margin-top: 14px;
}
#topnav ul {
word-spacing: 10px;
}
#topnav ul li {
list-style-type: none;
display: inline;
word-spacing: 10px;
}
#content {
background-color: orange;
}
#footer {
background-color: blue;
}
</style>
<div id="wrapper">
<div id="header">
<div id="logo">
logo
</div>
<div id="topnav">
<ul>
<li>home</li>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
You can see it here: http://jsfiddle.net/BRKrx/