Okay I'm using XHTML1.1 due to the fact that HTML5...doesn't behave as I expect, if anyone can provide a decent tutorial I'd be happy to look at it, so far anything I write in HTML5 doesn't render in any other browser but Chrome >_>; .
Now back to my problem.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
#Content{
position: relative;
background-color: #8CF;
padding: 1%;
border-color: black;
border-style: solid;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
height: 100%;
}
#Announcer {
position: relative;
background-color: #6AF;
padding: 1%;
border-color: #6AFFFF;
border-width: 1px;
border-style: inset;
}
#Column_Holder {
position: relative;
background-color: #6CF;
padding: 1%;
height: 100%;
}
.Column {
float: left;
padding: 1%;
overflow: auto;
height: 100%;
}
#Col1 {
width: 60%;
border-color: black;
border-style: solid;
border-right-width: 1px;
border-width: 1px;
}
#Article_Image {
background-color: #3DE;
position: relative;
float: right;
width: 20%;
text-align: right;
}
#Col2 {
width: 30%;
padding-left: 3%;
}
</style>
</head>
<body>
<div id="Content">
<div id="Announcer">
<h2>Announcer Place Holder</h2>
</div>
<div id="Column_Holder">
<div class="Column" id="Col1">
<div id="Article_Image">Image PlaceHolder</div>
<h1>Lots a text</h1>
<p>Creating Websites since 1989. I have created lots and lots of websites. This one is with XHTML1.1 and CSS3</p>
</div>
<div class="Column" id="Col2">
<h2>Another story</h2>
<p>Something else happened teh other day =3</p>
</div>
</div>
</div>
</body>
</html>
I've tried using floats...it's not appropriate as a solution in this instance. I've tried 100% height, Xhtml seems to completely ignore that instruction. Unless I declare a pixel height it's ignored strangely (yeah I'm struggling with this difference from HTML). Anyone want to provide a hint? Just a keyword >_<;
Thanks for reading
first of all, seriously? XHTML and without the XHTML doctype?
percentage is a relative unit of measurement. this means that whatever you place percentage dimensions, it depends on the parent. now, width doesn't have the need for the parent to have width declared for relativeness but height does. since #Content is a child of body, you need body to have a height (like say 100%). body is a child of the <html> tag, and for body's 100% to work, you need to have 100% for html.
plug this in your CSS above everything else to see what i mean:
html,body{height:100%;}
Related
I have been reading a few different answers to this type of question, as well as researching a bit on how to fix it, but I feel that my code is probably pretty messed up by now. I can't get my divs to sit next to each other so that I can create another larger div beneath them. I am very new at this and have been following tutorials and class reading to get this far, so I am sure something fairly simple or dumb is wrong. I just can't figure it out :-/. Here is the jsfiddle link http://jsfiddle.net/betyB/1/
CSS:
body {
background-image: url(superhighway.jpg);
background-repeat: repeat-x;
background-attachment:scroll;
background-color:#000000;
background-attachment: fixed;
}
#main1 {
position:relative;
z-index:1;
width: 600px;
height: 400px;
background-color:#000;
margin: 5px;
border: solid 4px #323232;
padding: 10px;
overflow:hidden;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
#content1 {
position:relative;
z-index:2;
top:-425px;
width: 960px;
height: 800px;
text-align:left;
color:#FFF;
font-weight: bold;
margin: 35px;
}
#main2 {
position:top;
z-index:1;
width: 600px;
height: 400px;
background-color:#000;
border: solid 4px #323232;
padding: 10px;
margin-left:auto;
margin-right:auto;
margin-top:300px;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
#content2 {
position:relative;
z-index:2;
top:-425px;
width: 960px;
height: 800px;
text-align:left;
color:#FFF;
font-weight: bold;
margin: 35px;
}
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Title Here</title>
<link href="MyStyle.css" type="text/css" rel="stylesheet">
<!--
<script language="Javascript" type="text/javascript">
<!--
alert("");
</script>
-->
</head>
<body>
<h1>My Ideal Job</h1>
<div id="main1"></div>
<div id="content1">
This is to test the content of the div.
<li>one</li>
<li>two</li>
<p></p>
<li>a</li>
<li>b</li>
</div>
<div id="main2" style="float:right;margin:0;"></div>
<div id="content2">
Testing number two div.
<li>one</li>
<li>two</li>
<p></p>
<li>a</li>
<li>b</li>
</div>
</body>
</html>
The first thing that you need to do is add the display: inline-block; property to your divs' CSS. Second, you may need to ensure that there is a whitespace (either via just adding a space or adding if that is not sufficient, in your divs.
Extra Info
Positioning divs can be very simple, or it can be very challenging depending on your implementation and what you are trying to achieve. Most of the time, when speaking generally about positioning divs side-by-side the simple answer is to use the display:inline-block property. However, if you are trying to space everything out evenly and provide the maximum amount of cross-browser support, the solution gets more complicated.
Check out this post. It provides a terrific description of the challenges and various solutions to positioning divs side-by-side with maximum cross-browser support. The post is primarily concerned with evenly spacing the divs, which you can decide to do or not to do, but it provides a lot of great background and extra info that you should know. I have used the described solution for over a dozen implementations.
Here is the code for that solution:
HTML:
<div id="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<span class="stretch"></span>
</div>
CSS:
#container {
border: 2px dashed #444;
height: 125px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
/* just for demo */
min-width: 612px;
}
.box1, .box2, .box3, .box4 {
width: 150px;
height: 125px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
.box1, .box3 {
background: #ccc
}
.box2, .box4 {
background: #0ff
}
And here is a link to the fiddle that he provided: http://jsfiddle.net/EDp8R/3903/
ok so I made this pen for you: http://codepen.io/anon/pen/zpxJt it does what I think you want, but your html has several errors, missing you shouldn't be doing inline styles, I understand you're new to this so I get it. The layout you want to achieve can be difficult if your html structure is not correct.
I have the following simple example of an img and a p floated next to each other in a div. If you uncomment the last bit of CSS, the text drops below the image and stays there - but only in IE8 Standards mode. How do I get the image to resize in IE8 without this unfortunate side effect?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.slide {
border-style: solid;
border-color: #DDDDDD;
border-width: 7px;
display: inline-block;
zoom: 1;
*display: inline;
}
.slide img {
border-right-style: solid;
border-color: #DDDDDD;
border-width: 7px;
float: left;
}
.slide .caption {
width: 230px;
float: left;
padding: 10px 10px 10px 20px;
}
/* Here's the issue. */
/*.slide img, .slide, .slide_wrapper {
max-width: 100%;
height: auto;
}*/
</style>
</head>
<body>
<div class="slide_wrapper">
<div class="slide">
<img src="http://placehold.it/362x250" />
<p class="caption">
test2
</p>
</div>
</div>
</body>
</html>
Setting an explicit width makes the text behave as expected:
.slide {
width: 629px;
}
Put this in your <head></head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
It probably fix the problem.
I'm a newbie when it comes to CSS. My overall goal is to convert a small web application that I have which displays data in table to using CSS.
A description of what the application displays is that in a left hand window there is a list of employee names, on the right is a cell for each day that the employee has worked which spans a user selectable period.
In the code below, I can't get the cell elements to overflow so that the user can scroll to the right, instead the cells are overflowing down.
Is there a way I can get the overflow to work horizontally rather than vertically so I can scroll left and right to see all the cells rather than what it is doing now which is creating a scroll bar vertically?
Much appreciated if anyone can help - it's got me frustrated!
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">Header</div>
<div id="centreposition">
<div id="centrecontent">
<?php
for ($counter = 0; $counter < 100; $counter++)
{
?>
<div id="cell">AB</div>
<?php
}
?>
</div>
</div>
<div id="footer">Footer.</div>
<div id="left">Left <div>
</body>
</html>
CSS:
body {
margin: 0px;
}
#header {
height: 100px;
background-color: #9FF300;
}
#centreposition {
width: 600px;
padding-right: 10px;
padding-left: 10%;
}
#centrecontent {
z-index: 100;
min-width: 1px;
height: 40px;
border: 1px solid #999999;
padding: 4px;
background-color: #FFFF00;
overflow-x: scroll;
}
#footer {
padding-left: 175px;
background-color: #20F3F7;
}
#left {
width: 10%;
position: absolute;
top: 100px;
left: 0px;
padding: 10px 0px 10px 6px;
}
#right {
width: 130px;
position: absolute;
top: 100px;
right: 0px;
height: 200px;
}
#cell {
float: left;
width: 24px;
height: 16px;
margin: 1px;
background-color: #aaccdd;
font-size: 10px;
border-style: solid;
border-left-width: 1px;
border-color: #555555;
}
Two suggestions:
You're essentially asking for a table-based layout, so you may as
well use an HTML table.
Each of your cells has a fixed width, and your PHP code should know
how many of them to create, so you can set the width of the
container element (#centrecontent here) wide enough to contain them
all.
Also, element IDs are supposed to be unique within the HTML doc, so creating 100 elements all with #cell as their ID is incorrect - you should use a CSS class name instead.
You could put all of the cells in another div and set that div to a specific width.
jsfiddle
I have a page with fixed width and I am trying to put borders on it, left and right without success.
I know how to show borders but I cannot make them to reach the bottom of the page and stay there, unlees I set my divs to position:fixed which is not desired for my content div since I want it to scroll. is there a way to get around it?
Here is my css file (the code as shone below makes my borders go until 1/3 of my window even if I set body height:100%) - Thank you in advance:
body {
margin: 0 auto;
padding: 0 0 0 0;
width: 1024px;
/*height: 100%;*/
min-width: 50%;
font-family: calibri;
background-color: #999;
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
overflow-y: scroll;
overflow-x: auto;
border-right: solid;
border-right-width: 5px;
border-left: solid;
border-left-width: 5px;
border-color: #1d687b;
}
div#all {
position: relative;
width: 1024px;
height: 100%;
margin: 0 auto;
/*padding: 0 0 5px 0;
border-right: solid;
border-right-width: 5px;
border-color: #1d687b;*/
}
div#top {
position: fixed;
margin: 0 auto;
width: 1024px;
height: 145px;
background-image: url("images/bg_ttl.jpg");
/*border-right: solid;
border-right-width: 5px;*/
border-bottom: solid;
border-bottom-width: 5px;
/*border-left: solid;
border-left-width: 5px;*/
border-color: #1d687b;
overflow: hidden;
z-index: 1;
}
div#top_left {
position: relative;
width: 190px;
height: 135px;
padding: 5px;
float: left;
text-align: left;
vertical-align: middle;
}
div#top_right {
position: relative;
width: 190px;
height: 135px;
padding: 5px;
float: right;
text-align: center;
vertical-align: middle;
}
div#top_center {
position: absolute;
left: 200px;
width: 624px;
height: 135px;
padding: 5px 0;
float: right;
font-family: metalord;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
div#left_menu {
position: fixed;
top: 150px;
float: left;
width: 185px;
height: 100%;
padding: 15px 5px 15px 5px;
border-right: solid;
border-right-width: 5px;
/*border-left: solid;
border-left-width: 5px;*/
border-color: #1d687b;
overflow: hidden;
}
div#content {
position: relative;
top: 150px;
left: 205px;
width: 784px;
height: 100%;
padding: 15px 15px 5px 15px;
/*border-right: solid;
border-right-width: 5px;
border-color: #1d687b;*/
}
HTML
<!DOCTYPE>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>arserus.com</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="all">
<div id="top">
<div id="top_left">
<span class="ttl_sd_l">
<img src="images/bttn_prpl.png" class="tl_txt" alt=""> network
<br />
& support
<br />
<br />
<img src="images/bttn_prpl.png" class="tl_txt" alt=""> creative ideas
<br />
& organization</span>
</div>
<div id="top_center">
<span class="ttl_txt">ARSERUS</span>
</div>
<div id="top_right">
<div>
<span class="ttl_sd_r">
<u>e-mail:</u>
<br />
info#arserus.com
<br />
<br />
<u>phone No. (cy):</u>
<br />
7000 17 37</span>
</div>
</div>
</div>
<div id="left_menu">
<div align="right">
<span class="mn_lnk"><a id="p_home" class="lnk">home</a></span>
<br />
<br />
<span class="mn_lnk"><a id="p_about" class="lnk">about us</a></span>
</div>
<div id="cp_rght">
<span class="txt_cr">© 2012 ARSERUS</span>
</div>
</div>
<div id="content">
<?php
require_once('p_home.php');
?>
</div>
</div>
</body>
</html>
The old school answer to this problem is to use Faux Columns -
http://www.alistapart.com/articles/fauxcolumns/
The idea is that you actually use a background image on your body element that is 1px tall, and as wide as you want, including the 'border' as part of the image, and to tile the image vertically.
True, it doesn't rely on CSS borders, and making changes involves image editing, but it is reliable.
For the most part, I've found approaching web design with the idea of a fixed height to be problematic, and I try to avoid it.
It sounds like there is another css rule conflicting with your border rule. So what I would do to begin with, is:
remove all css rules.
apply your css border rule.
Re-add your other rule one at a time till the styles break over the problem rule.
This will narrow down the problem, and make the solution easier to find.
Aside from that, you could try applying the border styles to the <html> tag. Hope this helps!
You might try setting a static height:
height: 768px;
If you are looking to make a fluid (% - based) height scheme in CSS, that is really tough. You might try using jQuery to get the window height and style your elements according to that:
var divHeight = $(document).height();
$('#yourDivId').height(divHeight);
I'm experiencing an issue with my CSS when working in Firefox. It should be pretty simple. Everything is working fine except that I cannot seem to get the links in the header aligned to the right (the color will change as well as any other modifications except alignment). The only way I can do it is to float it right, but that reverses the order of the links and seems wrong. Maybe there is a better way to deal with the links in the header than the span that I've used? I will have some more links in the header in another position, though, so I need to specify which links I'm referring to somehow...
Take a look at the code below:
First, the 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">#import "layout2.css";</style>
</head>
<body>
<div id="all">
<div id="head">
<span class="headlinks">
Logout
</span>
</div>
<div id="menu">
</div>
<div id="content">
</div>
</div>
</body>
</html>"
Now, the CSS:
/* Layout2.css */
#all {
border: none;
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
}
.headlinks a {
text-align:right;
color:#ffffff;
}
#head {
border: none;
position: absolute;
left: 0%;
width: 100%;
height: 10%;
background-color:#336699;
}
#head h1 {
margin-top: 1%;
text-align:right;
}
#menu {
border: none;
position: absolute;
left: 1%;
top: 12%;
width: 20%;
height: 90%;
padding-left: 1%;
padding-right: 1%;
background-color:#b1b2a3;
}
#content{
border: none;
position: absolute;
left: 25%;
top: 12%;
width: 72%;
height: 90%;
padding-left: 1%;
padding-right: 1%;
background-color: #eeeeee;
}
Thanks!
Change <span class="headlinks> to a <div>, and add text-align: right to its CSS style.
You want:
#head { text-align: right; }
The head div is a block element with 100% width. Headlinks is an inline element containing one link. text-align is used on a block element its contents, not on inline elements to indicate how to place them inside their parent.
An alternative approach is to make headlinks a block level element:
span.headlinks { display: block; text-align: right; }
Which to use depends on what you want to achieve.
Try putting the 'text-align:right' on the 'head' div rather than the 'headlinks' span. This style applies to block level elements like div, not inline elements like span.