hi i'm trying to create a very simple page but i get lost somewhere.
my idea is to create something with this structure
http://i57.tinypic.com/4r49ia.jpg
very simple... each color is a div.one on top of one another. the black rectangle is the only hard part, a space for a video for youtube.
i did this code but it just get messed up
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="margin:0; padding:0; text-align:center; color:white;” >
<div id="container” style=“margin:0; padding:0; text-align:center;” >
<div id="header" style="background-color:green; height:110px;width:2000px;">
</div>
<div id="menu" style="background-color:blue; height:70px;width:2000px;”>
<p>text here</p>
</div>
<div id=“content” style="background-color:red; text-align:center; height:800px;width:2000px;”>
# here goes youtube video #
</div>
<div id="footer" style="background-color:yellow;height:200px;width:2000px; ">
</div>
</div>
</body>
</html>
what do i do wrong? please help me.
i get the green line, then a blue line ( but with no text in it ) and the red area is totally missiong. then there's the yellow div... why?
It looks like you're using a mix of regular quotations -> " and the 'smart quotes' that Mac sometimes puts in (if I had to guess). See how the quotations before margin and after white; don't match
<body style="margin:0; padding:0; text-align:center; color:white;” >
Changing the 'smart quotes' back to normal quotes should fix your issue, and right clicking in whatever your editor is and turning off Substitutions/Smart Quotes should prevent it from happening again.
Not sure which editor you are using, but: '"' and this '”' aren't same signs...
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="margin:0; padding:0; text-align:center; color:white;" >
<div id="container" style="margin:0; padding:0; text-align:center;" >
<div id="header" style="background-color:green; height:110px;width:2000px;">
</div>
<div id="menu" style="background-color:blue; height:70px;width:2000px;">
<p>text here</p>
</div>
<div id="content" style="background-color:red; text-align:center; height:800px;width:2000px;">
# here goes youtube video #
</div>
<div id="footer" style="background-color:yellow;height:200px;width:2000px;">
</div>
</div>
</body>
</html>
This will work - you will have to fix empty space (caused by padding/margin) of p tag.
first you have to use either margin or float in layouts, second why are you using such a big pixel value
<div id="main" style="width:960px;margin:0px auto;">
<div id="hdr" style="float:left;width:100%;height:130px;background:orange;">
header
</div>
<div id="bdy" style="float:left;width:100%;height:500px;background:green;">
body
</div>
<div id="ftr" style="float:left;width:100%;height:80px;background:#cccccc;">
footer
</div>
</div>
It's may be because of "width:2000px;". You cant see it in low resolution screen. Try for example:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="margin:0; padding:0; text-align:center; color:white;” >
<div id="container” style=“margin:0; padding:0; text-align:center;” >
<div id="header" style="background-color:green; height:110px;width:200px;">
dfdasfasd
</div>
<div id="menu" style="background-color:blue; height:70px;width:200px;”>
<p>text here</p>
</div>
<div id=“content” style="background-color:red; text-align:center; height:800px;width:200px;”>
# here goes youtube video #
</div>
<div id="footer" style="background-color:yellow;height:200px;width:200px; ">
</div>
</div>
</body>
</html>
Happy valentine's day ^_^
replace body tag with this
<body style="margin:0; padding:0; color:white;">
I confirm this comes from your " caracters.
DEMO
Related
I've got a website with images tot he left and right in their own divs, one with float:right and one with float:left.
I also have an image that travels across the screen with the marquee tag.
Is there any way to get the marquee between the divs? So basically it would start at the left side of the right images and start to disappear on the right side of the left images.
If you don't get what I'm on about, here's an example page: http://benjiworld.ueuo.com/Example.html and as you can see, the marquee just appears underneath both divs, even when there's enough space for the marqueeing image between the divs.
This is my code for the test site:
<!DOCTYPE html>
<head>
<title>Example</title>
</head>
<body>
<div style="float:left; width:350px">
<img src="Jaffa.png">
<img src="Jaffa.png">
<img src="Jaffa.png">
</div>
<div style="float:right; width:350px" >
<img src="Jaffa.png">
<img src="Jaffa.png">
<img src="Jaffa.png">
</div>
<p style="text-align: center">
<marquee><img src="Hobnobs.jpg"></marquee>
</p>
Can anybody help? I really don't know how to sort it out, I've tried putting the marquee in a div in the centre but it didn't work either.
you can use position:absolute as I did:
.left,.right,.center{
position:absolute;
top:0;
}
.left,.right{
width:200px;
height:300px;
background-color:orange;
}
.center{
left:200px;
right:200px;
}
.left{
left:0;
}
.right{
right:0;
}
<div class="right">right</div>
<div class="left">left</div>
<div class="center">
<marquee>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Badge_256.png" alt="">
</marquee>
</div>
here is the jsfiddle : http://jsfiddle.net/78pgca5o/
Just give a style as float:left to paragraph tag
Just like below
<p style="text-align: center;float:left">
<marquee><img src="Hobnobs.jpg"></marquee>
</p>
Try this:
<!DOCTYPE html>
<head>
<title>Example</title>
</head>
<body>
<div style="float:left; width:50px">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
</div>
<div style="float:right; width:50px" >
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
</div>
<p style="text-align: center; position: absolute; z-index: -1; width: 100%">
<marquee><img src="http://benjiworld.ueuo.com/Hobnobs.jpg"></marquee>
</p>
I have a div with this markup:
<div class="col-sm-12">
<p class="bg-info">Basic Information</p>
</div>
which looks like:
I need a link 'Add /Edit' at the right end of the div so that it looks like:
Tried adding a paragraph tag to the existing one with a link but it pushes the new content below.
I am new to CSS so any help is greatly appreciated.
Thanks in advance.
Regards.
<div class="col-sm-12">
<p class="bg-info pull-left">Basic Information</p>
<a class="pull-right">Add/Edit</a>
<div class="clearfix"></div>
</div>
<div class="col-sm-12">
<p class="bg-info">Basic Information Add /Edit</p>
</div>
Bootstrap Quick floats
I assume you're using Bootstrap because of the classes you're using.
Try this:
<div id="container">
<div style="width:80%;float:left">
Basic Information
</div>
<div style="width:20%;float:right">
Add/Edit Rule
</div>
</div>
<html>
<head>
<style>
.bg-info {display: inline; float: left;}
.bg-info2 {display: inline; float: right; color: red;}
</style>
</head>
<body>
<div class="col-sm-12">
<p class="bg-info" style="float:left">Basic Information</p><p style="float:right" class="bg-info2">Basic Information</p>
</div>
</body>
<html>
Okay everybody so basically what's going on is I have my site setup so far with a top portion with my logo then in the middle i want three boxes. I can get the one on the left to go to the left underneath the top just where I want it same with the second. But the third when I use float right he wont line up like I told him to. Can someone please me out with this? Would really appreciate it!enter code here
fiddle here
<DOCTYPE! HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Welcome</title>
<link rel="stylesheet" href="css/first.css" />
<link rel="stylesheet" href=css/animations.css />
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrap">
<div class="top_portion">
<div class="logo">
<img src="img/2a685fsaq.png"/>
</div>
</div>
<div class="center">
<div class="cleft_portion">
</div>
<div class="mid_portion">
</div>
<div class="cright_portion">
</div>
</div>
</div>
</body>
</head>
</html>
Your .mid_portion is not floated. should also need to be floated left.
you need to put your right container before your middle one like this :
<div class="center">
<div class="cleft_portion">
</div>
<div class="cright_portion">
</div>
<div class="mid_portion">
</div>
</div>
A better solution would be to avoid floats and use display:table
see demo here
HTML
<div class="center" style="display:table">
<div class="cleft_portion" style="display:table-cell">
</div>
<div class="mid_portion" style="display:table-cell">
</div>
<div class="cright_portion" style="display:table-cell">
</div>
</div>
I have removed the floats and added table display...its better if you are looking for IE8+ browsers!!
try this one
.cleft_portion {
position:relative;
height:400px;
width:400px;
background-color:#3fb9a7;
float:left;
}
.mid_portion {
position:relative;
height:400px;
width:400px;
background-color:#55948b;
float:left;
}
.cright_portion {
position:relative;
height:400px;
width:400px;
background-color:#3fb9a7;
float:right;
}
http://jsfiddle.net/v4YwC/2/
I'm trying to figure out why my <div> element does not expand to cover everything it contains. I've seen this in Google Chrome's "Elements" view when I press Shift+Ctrl+J. I expected my "content" div to be sized to include <p>A</p> and <p>B</p>, but it doesn't.
PS-- I've read some comments that a footer is normally positioned absolute, but this is just to show the error.
Here is the simplified page:
<html>
<head>
<style type="text/css">
#footer{
background-color: lightblue;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="content" align="center">
<div style="width:50%;">
<p align="left">
Two divs:
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
</p>
</div>
</div>
<div id="footer" align="center">
<div style="width:90%;" align="center">
Here is my footer.
</div>
</div>
</body>
</html>
Add
<div style="clear:both"></div>
After
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
add this to the css:
#content { overflow: hidden; }
I have the following html code:
<html>
<body style="margin:0px; padding:0px;">
<div id="outer" style="height:100%;">
<div id="header" style="height:40px; background:blue;">Header</div>
<div id="main" style="height:100%; margin-bottom:-40px; background:red; overflow:auto;">
<p style="height:1000px">Main</p>
</div>
</div>
</body>
</html>
I only want the vertical scroll to appear on the main div when the content within it exceeds the viewable area, it seems the margin-bottom on the main div is not working.
Can anyone help me with this issue?
You seem to be solving the wrong problem, actually. If you just want to get rid of the scroll bar for the body itself, set body's style to overflow:hidden.
<html>
<body style="margin:0px; padding:0px;overflow:hidden;">
<div id="outer" style="height:100%;">
<div id="header" style="height:40px; background:blue;">Header</div>
<div id="main" style="height:100%; margin-bottom:-40px; background:red; overflow:auto;">
<p style="height:1000px">Main</p>
</div>
</div>
</body>
</html>
This should resolve the margin issue, and then all you have to do is keep the sizes right.