Hey I'm stuck on a code with CSS, I'm trying to make a certain div 100% of the height and 25% of the width of the page and fill it up with a background, but it only works if there is text entered and it will adjust itself to the height of the text, not the page.
Hope someone could help me with this.
index.html
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<title>Height test</title>
</head>
<body>
<div id="menu">kaas</div>
</body>
style.css
body{
background:#fff;
}
#menu{
background:#000;
height:100%;
width:25%;
}
Thanks in advance,
Remy
If you are setting a DIV to 100%, it is going to adjust to the content of it. In this brief example you're showing up, there's no content, so 100% of nothing is nothing.
If you want this div to be based on the page size, you must specify it.
body{
width:900px; //example values
height:500px; //example values
}
#menu{
background:#000;
height:100%;
width:25%;
}
And I would recommend you to create another div to treat the page in general.
<body>
<div id="page">
<div id="menu">kaas</div>
</div
</body>
and then:
#page{
width:900px; //example values
height:500px; //example values
}
#menu{
background:#000;
height:100%;
width:25%;
}
Related
I'm making a little project-school website with x10Host, and I am writing my own custom HTML for it. The front page is going to have a little image explaining who I am and what I do. This is the image:
When I use the following HTML and CSS, it shows up perfectly (image shows):
HTML
<div class="jumbotron">
<img src="Jumbotron.png"></img>
</div>
CSS
.jumbotron{
position:relative;
min-width:100%;
min-height:100%;
top:-50px;
left:-50px;
}
.jumbotron img{
min-width:100%;
min-height:100%;
}
It shows up perfectly as this:
The only problem I am having is when I resize the window. Currently, the window is 1080p. If I resize it, this happens:
Is there any way I could modify the HTML or CSS to make the image resize to the client's screen? If you would like to see the full HTML code, the website is http://mrsquer.x10Host.com/.
You need to set max-width: 100%; height:100%; to limit it to the container's width but keep max image height.
.jumbotron{
margin-left:-10px;
margin-top:-10px;
height:100%;
min-width:100%;
position:absolute;
}
.jumbotron img{
height:100%;
width:100%;
max-width:100%;
}
try this for css
<!doctype html>
<html>
<title>css testing</title>
<style type = "text/css">
.jumbotron
{
position:relative;
width:100%;
max-width: 100%;
height:100%;
}
.jumbotron img
{
width:100%;
height: auto;
}
</style>
</head>
<body>
<div class="jumbotron">
<img src="Jumbotron.png"></img>
</div>
</body>
</html>
img height must be set to 'auto' or it will not scale correctly (as in code above).
This works for any size screen, but I wouldn't use it.
Setting the img as a background would give you more freedom to add content. And
height: 100%;
is not needed unless you want the entire screen occupied by the container div.
If you want a DIY site, maybe read-up on basic html and css. Have fun !
I have a two columns layout, two of them have a 100% height. So far so good.
The issue rises when the left column (example below) content expands as a result of
a drop down menu.
Take a look at the markup below. I intentionally set another div inside the left one
to illustrate the right box is not expanding according to the left one.
<!doctype html>
<html style="min-height:100%;height:100%">
<head>
<title>test</title>
</head>
<body style="min-height:100%;margin:0;background-color:#ccc;height:100%">
<div style="width:30%;background-color:green;;float:left;min-height:100%"><div style="height:900px">Green</div></div>
<div style="width:60%;background-color:red;float:right;min-height:100%">Red</div>
</body>
</html>
What will be a good solution to get the right box to expand in height; whenever
the left one does?
LIke this
demo
css
html,body{
height:100%;
}
.container{
display:table;
background-color:#ccc;
width:100%;
height:100%;
}
.green{
display:table-cell;
background-color:green;
width:50%;
}
.red{
display:table-cell;
background-color:red;
width:50%;
}
html
<div class="container">
<div class="green">green</div>
<div class="red">red</div>
</div>
OR
Help Full Links for you.
http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
I want to show a div with some buttons ,first time my site loads and I want that the site become not usable until that div closes with one of its buttons (like when you choose an image in image.google.com and after that you see the selected picture with the site it extracted from behind it but that site is a little dark and just like a photo of the site)
I hope I could ask what I meant and if the structure of sentences are wrong I'm really sorry because english is my second language
<div id="overlay">
<div id="dialog">
Close me to see anything else
</div>
</div>
#overlay{
position:fixed;
z-index:9999;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,.3);
}
#dialog{
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;
left:50%;
top:50%;
position:absolute;
background-color:#ffffff;
border:1px solid #666;
padding:20px;
}
http://jsfiddle.net/MqVMr/
Here is an updated fiddle : http://jsfiddle.net/MqVMr/1/
Full Screen http://jsfiddle.net/MqVMr/1/show/
You need to create a floating div that absolutely positioned with a high z-index. Directly under this floating div element there should be an element that matches the width of the body elements clientWidth and the height of the body elements clientHeight, which you can refer to as a screen. Give the screen a background of black with an opacity of 25%. The screen will intercept all clicks since it is layered over the rest of the page, except for the modal which is layered above it.
Try this code...
<html>
<head>
<script type="text/Javascript">
function loading()
{
var sss = document.getElementById('back');
sss.style.opacity="0.20";
return true;
}
</script>
<style type="text/css">
#set {
width:350px;
height:350px;
margin: 0 auto;
background:#ccc;
color:#000;
}
</style>
</head>
<body>
<div id="back">
<div id="set">
<h1>This div you have to view.</h1>
<input type="button" onclick="loading();" value="Button"/>
</div>
</div>
</body>
You can also use jquery for this...... All the best..
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.titletext
{
font-family:"arial";
font-size:50px;
position:relative;
left:425px;
top:10px;
}
</style>
</head>
<body>
<p class="titletext">Hello World.</p>
</body>
</html>
I'm asking whether there's anything that can handle text positioning that will actually keep the text in its position while the page is being expanded/contracted. In other words, I want the text positioning to following according to the page size. For example, if I make a new paragraph and align it to the center, no matter how large or small the window is, the text will always stay in the center. Is there a way to accomplish this while setting the text position to your liking?
Try this way
body{text-align:center;}
p.titletext
{
font-family:"arial";
font-size:50px;
}
UPDATE:-for both horizontal and vertical
<style type="text/css">
p.titletext
{ position:absolute; top:50%; left:50%; height:2em; margin-top:-1em; width:40%; margin-left:-20%;text-align:center;
font-family:"arial";
font-size:50px;
}
</style>
this can be done by text-align:center and top:50% in p.titletext and remove position:relative so it will always on center
Okay, so I've got a problem - and I'd love to have it fixed.
I am using my favourite way of setting up a simple header/content/footer layout.
The problem is that any elements I add to the 'content' div of my layout can not be expanded to 100% in Internet Explorer (as far as I know, IE only).
I understand there is no height declared to the 'content' element, but because of the style of its positioning (declaring an absolute top AND bottom), the element fills the desired area. (The content element has a background color defined so you can see that the div is in fact filling between both the header and the footer.)
So my problem is, since the div is clearly expanded between the two, why can't a child be set to 100% to fill that area?
If anyone has any solutions, I'd love to hear them. (I'm looking for a solution that won't involve designing by an entire different layout.. or at least perhaps an explanation of why this is happening. I'm assuming at this point it's because of the lack of a height declaration -- but the div is expanded, so I don't get it!)
Here is the code as used on the page:
<!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 name="robots" content="noindex" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>No 100% height on 'content' child div in IE</title>
</head>
<style>
html, body {
width:100%;
height:100%;
margin:0px;
padding:0px;
}
body {
position:relative;
}
#wrapper {
position:absolute;
top:0px;
width:960px;
height:100%;
left:50%;
margin-left:-480px;
}
#header{
position:absolute;
top:0px;
left:0px;
width:100%;
height:200px;
background-color:#999;
}
#content{
position:absolute;
top:100px;
bottom:50px;
left:0px;
width:100%;
background-color:#F7F7F7;
}
#content_1{
width:200px;
background-color:black;
height:100%;
float:left;
}
#footer{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:50px;
background-color:#999;
}
</style>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="content">
<div id="content_1">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Try this:
#content_1{
width:200px;
background-color:black;
height:100%;
position: absolute;
}
IE 7 and below assign a value called "hasLayout" to elements that need positioning. Sometimes to work out little quirks like this you have to force an item to have a layout which in this case means setting its position to absolute.