I'm working in eclipse with the Web Tools Platform, which provides a WYIWYG-feature. Now I got the problem, that two -containers are not shown in the same line. The really weird thing is, that when I export the file to desktop and open it with my browser, de two containers are shown in line, but there are no margins. Why are there two different looks? I mean, it is possible that the eclipse plug-in doesn't work well, but at the latest when I open the file in browser, it should display what I code or not?
Here are two pictures of what I want to explain:
here is the html-file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="mainStyle2.css" />
<title>title</title>
</head>
<body>
<div id="container">
<div id="header"><b>main title</b></div>
<div id="navigation" style="float:left">
<b>Navigation</b> <br /><hr />
Welcome<br />
Team<br />
Links<br />
Screenshots<br />
</div>
<div id="contCont" style="float:left">
Content
</div>
</div>
</body>
</html>
... and the css-file:
#CHARSET "ISO-8859-1";
#container{ background-color:#00FF59;
width:1200px;}
#header{ background-color:#99FF99;
text-align:center;
font-family:bookman old style;
font-size:50px;
margin-top:20; margin-bottom:10;
margin-left:20; margin-right:20;}
#navigation{ background-color:#99FF99;
width:200px; height: 800px;
font-family:bookman old style;
font-size:20;
margin-top:10; margin-bottom:10;
margin-left:20; margin-right:20;}
#contCont{ background-color:#99FF99;
width:1000px; height: 800px;
font-family:bookman old style;}
NOTE: I already tested it with float:left in both "navigation" and "contCont", but there was no changing.
The WYSIWYG that IDEs provide are generally not very trustable.
Either way, try this:
#navigation{ background-color:#99FF99;
width:200px; height: 800px;
font-family:bookman old style;
font-size:20px;
margin-top:10px; margin-bottom:10px; float: left;
margin-left:20px; margin-right:20px;}
#contCont{ background-color:#99FF99;
width:960px; height: 800px; float:right;
font-family:bookman old style;}
Also wrap the navigation and contCont in another div.
Another thing to note is that browsers have default styles for html tags. You should be resetting them for example:
*{
margin: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
font-weight: normal;
font-style: normal;
}
Another thing that I noticed that for your margins, you are not specifying any units? Fixed it on the original code at the top. That's why the margins wont display in a real browser.
Also as previously mentioned, your container is too small because you are not taking in the margins.
try adding some margins to #contCont, it would also help to create a jsfiddle for trial and error purposes, generally wysiwyg is not the best idea for development.
you should also be adding your margins to the overall width of the container so if you have nav with width of 200px and 20px margins on each side, and the content div is 1000px, your container should be 1240px wide
Related
I have tried literally everything I can think of. I have tried dozens of coding samples from the stack and tutorial sites. I cannot get this to work no matter what I do, and I'm absolutely at my wits end with trying to figure it out. Me and CSS don't get along.
Here is what I'm trying to do:
Static Header (always on the screen.)
Footer that always stays at the bottom of the page. (Scrolls with content, but if there isn't enough content will appear at bottom of the screen.
Left menu with background that goes all the way down to the top of the footer.
I'm having trouble getting the background to go all the way down. It is a normal problem of being unable to have 100% parents, relatives and absolutes. This code I have now works fine with the exception of the background. I'm honestly considering just making the background a image and have it repeat. Here is 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">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#main_wrapper {
min-height: 100%;
position: relative;
}
#header {
width: 100%;
background:#0F0;
height:42px;
position:fixed;
left: 0;
top: 0;
}
#content {
margin-left: 200px;
background:#F00;
}
#footer {
width:100%;
height:32px;
position:absolute;
bottom:0;
left:0;
background:#00F;
}
#content_wrapper {
padding-bottom: 32px;
padding-top: 42px;
overflow: auto;
}
#left_menu {
width:200px;
background: #FF0;
float:left;
}
</style>
</head>
<body>
<div id="main_wrapper">
<div id="header"></div>
<div id="content_wrapper">
<div id="left_menu">MENU</div>
<div id="content">CONENT</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
JSFiddle Source
As you can see in the Fiddle code, what I'm going for is to have the yellow background take up the whole height. And any content that gets added will cause the whole page to scroll, footer to move to bottom and header remain static. All of that works right now except for the yellow background color taking up the whole height.
The easiest thing to do would be to add an image to the background that repeats in the Y direction.
background-image:url(images/background.gif);
background-repeat:repeat-y;
This gets the job done, but there has to be a better way!
I've been working on a responsive site and have come to a bit of a problem with Image Maps. It seems that Image Maps don't work with Percentage based co-ordinates.
After a bit of googling I found a JS workaround - http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html.
However I want the site to work with JS disabled.
So after exhausting those possibilities I decided to look into using relatively positioned Anchor tags over the images to do the same thing. This is a better option anyway IMO.
I've tried to place the anchor tags over the image with percentage based position and size, but whenever I rescale the browser the anchor tags move disproportionately to the image.
HTML:
<div id="block">
<div>
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
</div>
</div>
CSS:
#block img {
max-width: 100%;
display: inline-block;
}
a.one{
height:28%;
width:19%;
top:-36%;
left:1%;
position:relative;
display:block;
}
a.two{
height:28%;
width:19%;
top:37%;
left:36%;
position:absolute;
}
Here's a jsFiddle to describe what I mean - http://jsfiddle.net/wAf3b/10/. When I resize the HTML box everything becomes skewed.
Any help much appreciated.
You had a few problems with your CSS in the fiddle you posted (as well as a missing closing div tag). After making sure that #block was relatively positioned, not 100% height, and that your anchors were block/absolutely positioned, I was able to get the tags to move with the blocks.
Here is the updated fiddle:
http://jsfiddle.net/wAf3b/24/
CSS
html, body {
height: 100%;
}
#block{ float:left; width:100%; max-width: 400px; position: relative; }
#content{
height: 100%;
min-height: 100%;
}
#block img {
max-width: 100%;
display: inline-block;
}
a.one{ height:28%; width:25%; position: absolute; top:55%; left:5%; display:block; background:rgba(0,255,0,0.5);}
a.two{ height:28%; width:25%; position: absolute; top:60%; left:70%; display: block; background:rgba(255,0,0,0.5);}
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>Bulky Waste</title>
</head>
<body>
<div id="content">
<div id="block">
<div>
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
</div>
</div>
</div><!--/content-->
</body>
</html>
One important thing to note with the new html is the use of DOCTYPE. For some reason, some browsers don't like it when it is not capitalized.
Absolutely-positioned elements are no longer part of the layout, so they cannot inherit relative dimensional properties from their parent. You'll need JavaScript to do what you want.
People who disable JS expect a degraded experience already.
I have got my website under develp http://hrcprojectconsulting.com/ which looks fine when seen on screens with my resolution and size, otherwise, the horizontal scroller pops up and makes browsing annoying.
So I don't know exactly what I have to do. There are fluid layouts out there but they fill the whole screen and that would be kind of too much everything streched out. However, if I use some fixed css then the problem is that depending on the screen size and resolution, a horizontal scrollbar may appear, which must not happen.
Yes, yes, I have done all the reading and in fact I am following a very nice tutorial
http://www.netmagazine.com/tutorials/create-fluid-layouts-html5-and-css3#null
and I understand what the author does and it seemed very easy, so I went to do it with mine, and at the simplest step, it fails me, (prolly cause i have got another layout)
My HTML now (I have today tried to add a footer, but the footer neither does stay at the bottom, nor is it pushed down by content, but is overflowed but that is another story)
So here is the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href= "<?php echo base_url() ?>css/main_style.css" />
<script type ="text/javascript" src="<?php echo base_url()?>js/1.8.js"></script>
<title>Website</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<div id="left_content"></div>
<div id="middle_content"></div>
<div id="right_content"></div>
</div>
</div>
</body>
</html>
And here is the CSS
#container {
width:1040px;
margin:0 auto;
}
#header {
height:50px;
margin-bottom:20px;
}
#left_content {
float: left;
width:180px;
min-height: 600px;
margin-right:20px;
}
#middle_content {
font-family: 'trebuchet ms',geneva,arial,tahoma,sans-serif;
font-size:8px;
float: left;
width:640px;
min-height: 600px;
margin-right:0px;
}
#right_content {
float: right;
width:180px;
margin-right:20px;
min-height: 600px;
}
#footer {
float: left;
background: green;
margin-top: 20px;
margin-right: 10px;
margin-left: 10px;
clear: both;
width: 1020px;
height:200px;
}
So; what I tried to start doing, following the author, was to start modifying the very outermost wrapper container, changing the 1040px; to a 96%.
As soon as I did that, the blue bar that you see as a header shrunk to some 400 px and drifted to the left, plus the webform where you see all the tabs and boxes, just naufragated down to the botton adrift, completely unliking itself from the rest, so a mess.
How come? Why can't I just start doing what the author was doing with his design? he started with that 96% change.
It's because changing the 1040px to 96% gives the floating elements inside more "room" to float around.
If 96% > 1040px, then the floats will rise to the top and be next to one another.
Try making all the child elements %-based as well.
So I am experimenting with pure css layouts, and immediately I have become stuck. I have the following html and css:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Layout</title>
<link type="text/css" href="site.css" rel="stylesheet" >
</head>
<body>
<div id="header">
My Site
<div id="search-area">
<form>
<input type="text" id="search-box" />
<input type="submit" value="Search" />
</form>
</div>
</div>
<div id="sidebar">
Account Name <br>
Edit My Account
</div>
</body>
</html>
#header {
background-color: #151B54;
height: 30px;
width: 100%;
}
#logo {
position: relative;
left: 10px;
color: white;
font-size: x-large;
font-weight: bold;
text-decoration: none;
float: left;
margin-top: 3px;
}
#search-area {
position: absolute;
left: 200px;
margin-top: 3px;
}
#sidebar {
float: left;
width: 100px;
border-right: double;
}
When I view this in Chrome I get the rendering that I was expecting:
However, in IE I get the following:
Notice how there is a massive blank area to the left of the sidebar. Why is that showing in IE?
I get the same problem in Safari and for the same reason: you're not clearing your floats in #header and #header isn't quite tall enough to contain all of its floated children.
If you increase the height of the header to 31px, you should (but maybe not) get the desired layout. A better approach is you add overflow: hidden as a clear fix, that will make all of the children of #header fully contained with #header and that will stop them from interfering with the layout of the next piece:
#header {
background-color: #151B54;
height: 30px;
width: 100%;
overflow: hidden;
}
Live example: http://jsfiddle.net/ambiguous/EUmyN/
A rule of thumb with floated elements is to always make sure they're cleared either with overflow: hidden on their container or, if necessary, with an explicit <div style="clear: both;"></div> at the bottom of the container.
Also, while we're here, you rarely need width: 100% on a block element such as a <div>. If you're positioning it or floating then maybe you'll need something like that but not for a plain <div>; block elements are full width by default.
Try clearing your online cache. Oftentimes the css file is cached and using an older version causing this type of behavior.
May not be the problem, but the first action you should take when trying to troubleshoot unexpected results on style.
This is an embarrassingly basic problem, but I've been wracking my brains trying to find the solution and finally the frustration got too much for me...
All I'm trying to do is center a website in IE7. It works fine in Firefox, Safari, IE8, and Chrome. Just not IE7:
#container
{
margin:0 auto;
width:1035px;
}
I just can't see how this can go wrong. I've tried strict and transitional doctypes, I've also put the body in a text-align:center (makes no difference).
Any advice on this matter would be gratefully received.
Ok, here's (some of the) surrounding code:
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=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->
</head>
<body>
<div id="container">
<div id="content-container">
<div id="content">
/* content */
</div>
</div>
</div>
</body>
</html>
CSS (main):
html,body
{
text-align: center;
background-color:#F8F5EF;
height:100%;
margin:0;
padding:0;
width:100%;
}
#container
{
margin: 0 auto;
width:1100px;
}
#content-container
{
float: left;
width: 1100px;
background-image:url('../images/BG1.gif');
background-repeat:no-repeat;
background-position:0px 0px;
}
#content
{
float: left;
width: 778px;
padding: 15px 0px 80px 15px;
margin: 0 0 60 0px;
}
The IE7.css file doesn't modify those items.
Thanks!
G
Without posting your surrounding HTML/CSS we can't really help, as this code works in all IE (just tested)
Live Example
Which leads me to believe you have something affecting the styles. If you can show that or provide a link, I think more help can be provided.
Here is the CSS used:
#content {
width: 100px;
margin: 0 auto;
border: 1px dashed red;
}
HTML used:
<div id="content">
content here
</div>
Updated code, using your css/html provided:
http://jsfiddle.net/hyVjs/2/
This code is fine. One of your sub css files is messing you up :)
Have you tried removing your conditional css files and see if it still isn't working?
Make sure you have set the DOCTYPE. If not IE will enable quirk "dirty mode"
text-align is for aligning text...
in ie7 make sure you have given the parent container a width other than auto then all should be well.
You could try doing this for your container:
#container {
position: absolute;
margin:0 0 0 50%;
width:1100px;
left: -550px; /*half the element width*/
}
If the above doesn't fit your needs, try position:relative;
I found using percentage margins worked for IE7 when nothing else did. Though auto margins seem to work sometimes - your code in jsFiddle seemed fine under IE7.
The negative positioning to the left is needed to bring back the element, which is centered from its left edge.
If the container is a DIV then
#container
{
margin:0 auto 0 auto;
position:relative;
width:1035px;
}
if it does not work, use a css-reset first. It will definitely work.
try using
display:block;
for the container
Yeah, if I'm going to center a container, I usually text-align:center; the body and left align inside the container for backwards compatibility. Old habit I'm going to kill some day.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>a box</title>
<style>
body { text-align:center; }
#wrap { width:36em; padding:2em; margin:1em auto; text-align:left; background:#eee; }
</style>
</head>
<body>
<div id="wrap">…</div>
</body>
</html>