I'm creating a landing page, with an image with text over it.
I have the div that contains the text as a child div to the image div, and the image uses viewport height to fill the whole screen, however as soon as I insert text in the centered child div, for some reason the image gets resized in height, and there's uneeded scrolling space. I have tried different display types, and everything.
I've made an example, one with the div that shows the text and one without
With text and extra scrolling space: http://jsfiddle.net/g7ch1p0j/
<!DOCTYPE html>
<html>
<head>
<title>Ekchö</title>
<link href="global.css" rel="stylesheet">
</head>
<body id="body">
<div id="header_bg">
<div class="fluid_controller">
<div id="header_text">Ekchö</div>
</div>
</div>
<div id="lander">
</div>
<div class="fluid_controller">
<div id="content"></div>
</div>
</body>
</html>
Without text and no scrolling space between the image and content below it: http://jsfiddle.net/sctcebmf/
<!DOCTYPE html>
<html>
<head>
<title>Ekchö</title>
<link href="global.css" rel="stylesheet">
</head>
<body id="body">
<div id="header_bg">
<div class="fluid_controller">
<div id="header_text">Ekchö</div>
</div>
</div>
<div id="lander">
</div>
<div class="fluid_controller">
<div id="content"></div>
</div>
</body>
</html>
You'll see the text moving upwards a little bit (grab the scrollwheel and drag it down slowly) before you see the end of the image (black box) and that's because of the extra issue. This does not appear in the second example.
Got your fiddle working as expected by changing #lander_meta's position to absolute, adding width:100% and making its p tags text-align: center.
Working fiddle.
Related
This is a normal div
<div>First div</div>
I do this in order to change the height.
<div height="150">
First div
</div>
But nothing happens. I don't see the div taking more than it's usual height.
What might me going on that I'm not seeing?
This is the complete code:
<html>
<head>
<title>Probando</title>
</head>
<body>
<div height="150">
First div
</div>
<div>
Second Div
</div>
</html>
Instead of using height attribute, which is deprecated on most HTML elements, you can simply use inline CSS, like in this demo:
<html>
<head>
<title>Probando</title>
</head>
<body>
<div style="height: 150px">
First div
</div>
<div>
Second Div
</div>
</html>
You should use inline CSS for this purpose.
<div style="height: 150px">
First div
</div>
You should try CSS, HTML element's height and width apply on the table only.
<html>
<head>
<title>Probando</title>
</head>
<body>
<div style="background:#CCC;height:150px">
First div
</div>
<div>
Second Div
</div>
</html>
Pure html - use <br> as many times as div height is enough (no per-pixel precision)
<div>
First div<br><br><br><br><br><br><br><br>
</div>
<div>
Second Div
</div>
I'd like to align two divs next to each other, and have them scroll across the screen from right to left. I know how to do this for a single piece of text enclosed in paragraph tags, but would like to do this for the two divs. Is that possible? Thanks.
Check this example code -
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>
<div>
<div style = "float:left">
DIV 1 DATA
</div>
<div style = "float:left">
DIV 2 DATA
</div>
</div>
</marquee>
</body>
</html>
I have two divs, and I want to set them so the body div starts below the navbar, but they keep intersecting. How would I make it so that the bodyContainer div is always below the navbar?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<meta charset="utf-8">
</head>
<div id="topBarContainer">
<div id="topBar">
<span id="topBarTitle">Private & Air's Shop</span>
</div>
</div>
<div id="bodyContainer">
<div id="bodyContent">
<div id="mainBodyContent">
test
</div>
</div>
</div>
</html>
CSS: http://pastebin.com/u5Z4ib4q
The css was long, so I put it into a pastebin.
You used 'position:fixed' on #topBarContainer in the css. This means that when other elements on the page are to take their positions, they will completely ignore the #topBarContainer as if it was not there in the first place. So remove 'position:fixed' from the css file. if however you chose to use 'position:fixed' intentionally to maintain the position of#topBarContainer even when the page is scrolled up then you should add the following to #bodyContainer#topBarContainer to force it under the #topBarContainer div
position:fixed;
top:75px;
you have used fixed position #topBarContainer. So that you need to add top-margin in body container
on your css
#bodyContainer {
margin-top:50px;/*the height of your header*/
}
This should do it! :)
I would remove the position: fixed; from your #topBarContainer, that will bring your #bodyContainer right below the navigation.
Optionally, I changed the #topBar's height: 75px; into min-height: 75px;, so you won't lose the content on smaller viewports.
Here's fiddle: http://jsfiddle.net/9me3hob3/
I am developing a responsive mobile web page using twitter-bootstrap.css and angularjs.
I am trying to accommodate one image and text side by side in a row using float concepts.see screenshots below.
I give width to the image and i didn't give width to the text, as i want the text to take the remaining width left out by the image,
But it is not happening, text comes to the next line instead of wrapping into the available width left out by the image,when the text is more than the width.
Screen shot #1
When text contains within the width left out by the image, when the text content's width is less than available width left out by the image.
(Link to the full image)
Screen shot #2
When text comes to new line instead of wrapping within the width left out by the image, when the text content's width is more than available width left out by the image
(Link to the full image)
Screen shot #3
As i needed, when text comes wraps within the width left out by the image, when the text content's width is more than available width left out by the image. But width is set for text.
(Link to the full image)
My Code is
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<style>
.float-left {float:left !important;}
.clearIt {clear:both !important;}
.marRight5{margin-right:5px}
.BgImg{background: url(images/img.png) no-repeat;height:25px;width:25px}
</style>
<script src="lib/angular/angular.js"></script>
</head>
<body>
<div class="row-fluid">
<div class="BgImg float-left marRight5"></div>
<div class=" float-left">This is test content This is test content This is test content This is test content This is test content</div>
<div class="clear"></div>
</div>
</body>
</html>
Take the float off your text div. Floated elements do not wrap around other floats, they float around them as a block, wrapping to a new line if necessary.
http://jsfiddle.net/isherwood/jP6yd/
<div class="row-fluid">
<div class="BgImg float-left marRight5"></div>
<div>This is test content This is test content This is test content This is test content This is test content</div>
<div class="clear"></div>
</div>
I'm studying code that I found on the net and faced problem. When I add text to the main div called content, I get no margins, text is too close to sidebar. How should I fix it? Here's the code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="outer">
<div id="header"></div>
<div id="inner">
<div id="sidebar"></div>
<div id="content">
</div>
</div>
</html>
CSS
#outer {width:1000px;margin:0 auto;}
#inner {overflow:hidden;}
#header {min-height:40px;background:#bbb}
#content {width:900;min-height:900px;float:left;background:#ccc;clear:}
#sidebar{width:100px;min-height:250px;float:left;background:#ddd}
Use padding and/or margins on your content and/or sidebar div in the CSS
http://www.htmldog.com/guides/cssbeginner/margins/
Have you tried something such as
#content{box-sizing:border-box, width:900;min-height:900px;float:left;background:#ccc; padding:10px;}
Using "box-sizing" should ensure it doesn't mess up your page.
edit: and yeah, close that html, that could really help.
Don't know what you need exactly. But try to add padding-left or margin-left
#content {width:900;min-height:900px;float:left;background:#ccc;padding-left:20px;margin-left:10px;}
Inside the content div add another div and use margins on it.
You can also use a paragraph tag and same use margins on it, this will not break your layout.
Also you are missing a closing tag, this definatly needs to be fixed.
Try:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="outer">
<div id="header"></div>
<div id="inner">
<div id="sidebar"></div>
<div id="content">
<div class="box">
all text and content comes here
</div>
</div>
</div>
</div>
</html>
Additional CSS:
.box {
margin:50px;
}