I have an issue with the div on my page. It's the only one I have, and it covers the middle of my page. With a few tweaks in CSS, I made it go all the way down.
The problem though, is that the video(which is inside the div element), is sneaking out like so:
Here's the HTML:
<html>
<head>
<link rel="shortcut icon" href="Images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="Style.css" media="screen" />
<title>Arthur</title>
<meta content="text/html" charset="windows-1251">
</head>
<Body background="Images/background2.jpg">
<IMG class="imgborder" src="Images/button.png" align="left" height="50">
<div id="wrapper" style="background-color:black; width:60%; margin-left: auto ; margin-right: auto ;">
<center><img width="60%" src="Images/logo2.png"></center>
<BR><BR>
<center><img class="imgborder" height="300" src="Images/muller.jpg"></center>
<Font size="5" color="crimson" face="Calibri">
<Center><P align="justify">... </P>
<P align="justify">...</P>
<P align="justify">...</P></Font></Center>
<Center><iframe width="640" height="360" src="..." frameborder="5"
allowfullscreen></iframe></Center>
<Font size="5" color="crimson" face="Calibri"><P>Thomas Muller</P></font>
</div>
</body>
</html>
And here's the CSS:
#charset"utf-8";
/* CSS Document*/
/*This section is for links*/
a:link {
font-weight:normal;
color:crimson
}
a:visited {
font-weight:normal;
color:Crimson;
}
a:hover {
font-weight:bold;
color: Royalblue;
font-variant:small-caps;
}
/*This section is for a paragraph section*/
p {
font-style:normal;
font-size:18px;
}
blue {
color:crimson;
}
/*This section is for the image's black border.*/
.imgborder {
border-color: crimson;
border:thick;
border-style:outset;
}
.body {
background-color: #0000FF;
}
html, body {
height:100%;
}
#wrapper {
margin: 0 auto;
width: 990px;
height:100%;
overflow:hidden;
position:relative;
}
#navigation {
margin: 0 auto;
width: 990px;
height: 55px;
background-color: #fff;
}
#bottom Half {
margin: 0 auto;
width: 990px;
height: 100%;
background-color: #4d3c37;
}
div {
/* set div to full width and height */
width: 100%;
height: 100%;
}
p {
margin-left:2cm;
margin-right:2cm;
}
The only solution I can think of is manually tweaking the black frame's height, or perhaps adding a
overflow: hidden;
property to the frame (in your rather difficult-to-understand tag system, I believe it would be <Center>).
Right now, the <iframe> element is overflowing from its parent container (the black box). By specifying a height for this box, you can control the size.
By specifying overflow: hidden, you can hide the box's overflow - thus doing one of two things:
Hiding anything that leaks out of the box, preventing elements that are larger than the box's size to show parts that will seem "unbound" by the container's edges
If the elements are chosen properly with semantic HTML, many elements that are not bound by height and width will automatically size themselves to fit their contents
Another possible solution would be to specify position: relative and/or float: none for both the container and its children, which sometimes solves the problem.
To emphasize again, it's difficult for us to test and debug the code you've given us because it is effectively out of date.
Use inherit for the styles of the video. Like display style attribute can be 'inherit', as well as height and width.
Related
Sorry, if my problem is a little bit too specific, but I have not found the answer anywhere else. On my website, there is a header that is supposed to take up the whole width of the screen, but it does not. There is always a blank space between the top, and the sides. I have tried display: block; min-width: 100%, just width: 100% and many more variations but I just can't find out how to get rid of it. Anybody have ideas? Thanks!
FULL CODE
/* GLOBAL */
body {
/*background-color: #1abc9c;
display: block;
min-width: 100%;*/
}
#content {} header {
display: block;
min-width: 100%;
height: 100px;
background-color: #34495e;
border-top: 5px solid #1abc9c;
}
<!DOCTYPE html>
<html>
<head>
<title>Example Website</title>
</head>
<body>
<div id="content">
<header>
<img src="REPLACE.png" />
</header>
</div>
</body>
</html>
By default, the browser adds some margin to body element. Thus to fix it, add margin:0; to your body CSS.
body {
margin:0;
}
JSfiddle demo
UPDATE:
I found that floating #name to the left fixed my issue. Strangely it remains centered. I don't understand why this should be.. but it works now.
I have a web app that uses AJAX to update a <p> element with some text generated by a script.
When the page loads initially, the <p> is empty (<p id="name"></p>). There are two other elements below it, all centered inside a <div>, they are an <img> and a <p> respectively.
Here is the html:
<html>
<head>
<title>Name Generator</title>
<link rel="stylesheet" type="text/css" href="static/main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="static/name.js"></script>
</head>
<body>
<div>
<p id="name"> </p><br/>
<p id="title">GENERATE YOUR NAME</p>
<img id="button" src="static/generator.png"/>
</div>
</body>
</html>
and the CSS:
body {
/*border: 1px dashed white;*/
position:relative;
width: 960px;
margin: 0 auto;
padding: 0;
text-align:center;
background-image:url('static/background-soundproof.png');
background-repeat:no-repeat;
background-size:cover;
}
div {
/*border: 1px dashed blue;*/
text-align: center;
width: 400px;
height: 600px;
margin: auto;
}
#name {
color:black;
text-shadow:0 0 12px white;
text-transform:capitalize;
font-family: Impact, Sans-Serif;
font-weight:100;
font-size:2.5em;
margin: 0 auto;
position: relative;
top: 60px;
}
#title{
font-family:Courier, sans-serif;
font-size:1.5em;
color:#7D7DBD;
position: relative;
top: 400px;
}
img {
margin: auto;
position: relative;
top:150px;
}
My problem is, when the page first loads, the first <p> is empty, and because of this, it doesn't seem to have any dimensions. When the <img> is clicked, the <p> is updated with some text, and this causes the elements below it to shift down the page by about the height of the newly updated <p>. Is there a way that I can load the page so that the empty element has fixed dimensions, which it keeps when updated. So it's dimensions will basically never change and nothing is shifted around by it.
I have tried giving it width and height, padding and a margin in css, to no avail. I have also tried having it initially filled in with a ' ' which I read somewhere might do the trick, but it didn't. Any help much appreciated.
Demo
add this to your css
p#name{
min-height: 150px;
}
Edit:
p#name{
display:inline-block;
min-width: 150px;
min-height: 150px;
}
Say I have div that is a specified width of 200px. Then I have 3 h1 elements in that div with different amounts of letters / different widths. How do I stretch them horizontally to fill the div?
<div id="Header">
<div class="Logo"><h1>CORROBORREE</h1><br><h1>FROG</h1><br><h1>PROJECT</h1></div>
What I need is the words to be same width---the width of the containing div.
I tried text-align justify on the h1 but that didn't do any good.
.Logo {
margin-left: 100px;
height:auto;
width: 250px;
background-color:#666;
font-family: Impact, Charcoal, sans-serif;
text-align: justify;
}
.Logo h1 {
font-size: 40;
text-align:justify;
display: inline;
}
I don't think there's a pure CSS way to do it as of now (I mean using some straight CSS way, you need to juggle things around), what you can do is use nth-of-type in CSS and give letter-spacing to each.. this way you don't have to declare classes for each h1 and also you'll get stretched text
Demo
<div class="Logo">
<h1>CORROBORREE</h1>
<br />
<h1>FROG</h1>
<br />
<h1>PROJECT</h1>
</div>
html, body { /* Using this or not depends on you,
nothing to do with the example */
width: 100%;
height: 100%;
}
.Logo {
background: #f00;
width: 300px;
}
.Logo h1:nth-of-type(1) {
letter-spacing: 4px;
}
.Logo h1:nth-of-type(2) {
letter-spacing: 70px;
}
.Logo h1:nth-of-type(3) {
letter-spacing: 25px;
}
Why you want to do it, I don't know, cuz this will look super weird
Use letter-spacing
eg: letter-spacing:20px
Check this out:
Demo
CSS:
#Header{
width:200px;
height:200px;
background-color:grey;
overflow:hidden;
}
#h1{
-webkit-transform:scaleX(0.78);
margin:0 0 0 -25px;
}
#h2{
-webkit-transform:scaleX(2.3);
margin:0 0 0 70px;
}
#h3{
-webkit-transform:scaleX(1.3);
margin:0 0 0 25px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="Header">
<div class="Logo"><h1 id='h1'>CORROBORREE</h1><br><h1 id='h2'>FROG</h1><br><h1 id='h3'>PROJECT</h1></div></div>
</body>
</html>
text-align:justify and display:block.
And there can be only the one h1-tag on one page
I have a vertical layout that I want to remain centered on the page. One column stays fixed on the page while the other should scroll according to the content and there are some decorative floating divs that are absolute. I want the scrolling column to display 100% vertically, even if the content doesn't require the height, but I can't seem to get this to work. I've set the html tag and body tag to height:100%, as well as all of the necessary div tags. Having the html tag set to this attribute causes all of the content except for .content and .share to disappear.
Here is my html:
<html>
<body>
<div class="leaderboard"></div>
<div class="container">
<div class="share">
<p>All content © 2011
<br />
Web Design © Unillu, Megan Prior-Pfeifer</p></div>
<div class="sidebar1">
<img src="assets/llama.png" width="168" height="265" alt="Deathllama logo" />
<ul class="nav">
<li><img src="assets/phone.png" width="208" height="15" alt="How to put ringtones on your phone!" /></li>
<li><img src="assets/kill.png" width="208" height="31" alt="Kill a dinosaur the easy way!" /></li>
<li><img src="assets/ringtones.png" width="208" height="15" alt="Bad ringtones for you to use!" /></li>
<li><img src="assets/legal.png" width="208" height="15" alt="Use the content accordingly!"/></li>
<li><img src="assets/contact.png" width="208" height="15" alt="Talk to me!"/></li>
<li><img src="assets/faq.png" width="208" height="15" alt="Look here before you ask me anything!" /></li>
<li><img src="assets/home.png" width="208" height="15" alt="Go home!"/></li>
</ul>
<p> </p>
<div class="extraDiv1"></div>
<!-- end #sidebar1 --></div>
<div class="content">
<div class="extraDiv2"></div>
<p>Contact</p>
<div class="ads_column"></div>
<h3 id="text">Contact Brian, Creator:</h3>
<p id="text">brianbritvec#gmail.com</p>
<h5 id="text">Contact Megan, Webmaster:</h5>
<p id="text">mprior#unillu.com</p>
<!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>
And here is my CSS:
html, body {
margin: 0;
padding: 0;
color: #FFF;
font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #61ADC3;
}
html {
min-height:100%;
}
body, .container, .content, .extraDiv2, .sidebar{
height:100%;
min-height:100%;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin: 10;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link, a:visited, a:hover, a:active, a:focus{
color: #FFF;
text-decoration: underline;
}
.container {
width: 640px;
margin: 0 auto;
overflow: hidden;
background-color: #61ADC3;
}
.sidebar1 {
z-index: 2;
float: left;
width: 224px;
padding-bottom: 10px;
position: fixed;
background-attachment: fixed;
background-color: #61ADC3;
background-repeat: no-repeat;
background-position: right top;
text-align: right;
padding-right: 32px;
}
.extraDiv1{
z-index:3;
position:absolute;
top:0;
width:29px;
height:609px;
margin-left:227px;
background-image: url(assets/sidebar.png);
background-repeat: no-repeat;
background-position: left top;
}
.extraDiv2{
z-index:5;
position:fixed;
margin-top:-10px;
width:12px;
background-image: url(assets/stripe.jpg);
background-repeat: repeat-y;
background-position: left;
}
.content {
z-index:5;
width: 384px;
float: right;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
background-image: url(assets/gradient.png);
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
background-color: #FBB03B;
}
/* Hack for IE */
* html .content {
height: 100%;
}
/* End IE Hack */
.leaderboard {
width:795 px;
margin: 0px auto;
background-color: #61ADC3;
}
#descriptions {
font-size: 12px;
line-height: 1;
display: block;
width: 170px;
margin:15px 55px;
}
#descriptions h5 {
font-size:14px;
font-weight:bold;
}
#text {
font-size: 12px;
line-height: 1;
width: 200px;
margin: 15px 25px;
}
#text h5{
font-size: 14px;
font-weight: bold;
}
#play {
width: 25px;
margin-right:0px;
float:left;
}
.share {
z-index:5;
font-size:9px;
bottom: 0px;
text-align: right;
width: 256px;
position:fixed;
float: left;
color: #F00;
}
.share a {
color: #C30;
}
#ads_column {
float:right;
padding: 5 px 5 px 0 px 5px;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none; /* this removes the list marker
}
ul.nav li {
display: block;
margin: 5px;
}
ul.nav a, ul.nav a:visited {
margin: 5px;
display: block;
text-decoration: none;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
border:1px;
border-color: #F30;
}
Your CSS is a huge mess.
First, avoid using position:fixed, especially on such large scale. Most mobile browsers don't "fix" those positions, and some older browsers render incorrectly with them.
height:100% means set the height to 100% of its parent container. However, which in this case is "container", which again is sized as 100% of its container, which is "body". As "body" does not have a height set on it, body's height gets calculated to be enough height to wrap the entire page.
Note: Setting height:100% on body doesn't work to make it scale to the entire window; you have to set position:absolute on body and make top/left/right/bottom zero to do that.
Back to the "body" height calculation. Notice that the sizing calculation does not include anything that is "floated", because when you "float" something, it takes it outside of the normal layout. Anything that is "floated" occupy no spacing!
Try this experiment: turn off overflow: hidden in your "container", and you'll see the height of "container" and "body" suddenly collapses into zero. All your elements are floated, so they take up no space if there is not overflow: hidden.
Thus, you whole mess of CSS is essentially telling "content" to size itself to 100% of the height of "container", which is 100% of "body", which is whatever height that is necessary to include all the content of the page. With overflow: hidden in "container", that height is the height of "content". Without overflow: hidden in "container", that height is zero.
If the height of "content" is 100% of zero, which is zero, and it does not itself have "overflow: hidden" set on it, and it is a block element, then this height will simply be ignored and the height becomes whatever height that is required to hold its elements.
There you go. Now you know why your orange doesn't extend all the way to the bottom of the screen. You were depending on height:100% on "body" to stretch it out to the full height of the screen; it doesn't work this way.
The solution?
DELETE THE WHOLE THING AND TOTALLY REWRITE YOUR CSS -- It is too much of a mess. You don't want this. And it will never work right for you. Get a good book on CSS and read through it, then do it RIGHT. CSS is not something you can learn via trial-and-error.
Start with position:absolute; left:0px; right:0px; top:0px; bottom:0px; on "body". This will stretch "body" to fill the whole window. Check it by setting a background color on "body".
Notice that #2 may not work on mobile browsers. You'll need to set a min-height in pixel value to make sure that it fills the whole screen.
I think it's the .extraDiv2 {height:100%} which is causing it.
It seems fine in Chrome 10, but very broken in IE9. Try removing the width on the .container element and change the float of the .content from right float to left float. It may help a little with IE9.
"I want the scrolling column to display 100% vertically, even if the content doesn't require the height, but I can't seem to get this to work"
Your best bet is to use some jQuery to set the height dynamically based on the viewport height.
Demo: http://jsfiddle.net/wdm954/a2jhw/
EDIT: To show w/ jquery loading.
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
fixHeight();
});
$(window).resize(function () {
fixHeight();
});
function fixHeight() {
var $h = $(window).height();
$('#someDiv').height($h);
}
</script>
EDIT: Ok basically here I created a function (fixHeight) where we put the code to fix the height. Then we run the function when the document is ready and when the window is resized.
Also here are some fixes for your code...
Closed the comment here.
ul.nav {
list-style: none; /* this removes the list marker */
}
Removed the spaces between your numbers and "px" here...
.leaderboard {
width: 795px;
margin: 0px auto;
background-color: #61ADC3;
}
#ads_column {
float: right;
padding: 5px 5px 0px 5px;
}
Height 100% only works if the cointainer block (html in this case) has a fixed height defined.
Other than that, I don't see why things should be disappearing.
EDIT: The above is not correct in html's case. (See comments)
In your case you need to set html to height:100% (instead of min-height:100%). That will fix the problem.
I concur with the opinion that the code can be improved, but good job, learning happens step by step.
Basically I'm trying to create a small div (header class) that sits on top of a main banner image div (banner class). I've been able to position it correctly when my browser window is maximized, but when I resize the browser the header div maintains the margins and shrinks down to much less than the banner's width. I realize this is because I have the margins set at fixed positions on the left and right so they're maintaining those positions... I'm just new to CSS and am not sure exactly what to do to prevent this from happening. I've been messing around with positioning for about an hour and just can't get it right.
CSS:
<style type = "text/css">
body {
background-color: #595959;
}
.header {
background-color: #4CBB17;
padding: 12px 0px 12px 0px;
margin: 0px 137px 0px; 137px;
}
.banner {
text-align: center;
}
</style>
HTML:
<html>
<head>
<title>Thanks!</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div class="header">
</div>
<div class="banner">
<img src="banner.jpg" />
</div>
</body>
</html>
Any help would be much appreciated!
either put the banner into the header div
or create a "wrapper" div for the whole site, if your banner image, for example, is 960px wide and that how wide you want the site to be a wrapper many be beneficial as you can center the wrapper and forget about trying to center everything inside it.. or even if then your banner is less you can then center it inside the #wrapper.. options ;)
CSS:
body {
background-color: #595959;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
.header {
background-color: #4CBB17;
padding: 12px 0;
}
.banner {
text-align: center;
}
HTML:
<div id="wrapper">
<div class="header">header text</div>
<div class="banner">
<img src="banner.jpg" style="width: 960px; height: 230px;" />
</div>
</div>
I´m not sure what you are trying to achieve exactly, but if you want the banner always to be the same size as the header, you can use:
.header, .banner {
margin: 0px 137px 0px; 137px;
}
.header {
background-color: #4CBB17;
padding: 12px 0px 12px 0px;
}
.banner img {
width: 100%;
}
Or you get rid of the banner altogether and use a background image for the header.
Maybe you can add a min-width: property to the header?