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;
}
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'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.
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 have the following problem.
I am using a twitter bootstrap to make my new website but I have difficulties with the background. The following is what I have :
<body>
<div class="wrapper">
<div class="navbar navbar-inverse navbar-fixed-top">
...
</div>
<div id="header">
...
</div>
<div id="content">
...
</div>
<div class="push>
</div>
</div>
<div class="footer">
....
</div>
</body>
The navbar is fixed at top. (fixed height)
The header (title stuff) is scrolling with the page and is fixed height.
the footer is at the bottom of the page but scrolls if there is more content (not fixed at bottom but fixed height)
What I want is that the content has a background that takes all the avaiable space (from right after the header till the footer)
Image to clarify
Full HTML & CSS(without bootstrap css) code
So you want the content area to be at least 100% less header and footer so to speak?
This is how i would do it:
demo:
http://jsbin.com/ofijap/1/edit
.head {
height:100px;
background-color:green;
}
.wrap {
min-height:100%;
background-color:red;
}
.footer {
height:100px;
background-color:grey;
margin-top:-100px;
}
.content {
padding-bottom:100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<div class="head">Head</div>
<div class="content">content</div>
</div>
<div class="footer">footer</div>
</body>
</html>
EDIT:
as a rule of thumb, if you want something to fill up all the vertical space it probably needs min-height:100%; But, its parent should have 100% height too, and so on up to the body element.
To the people who want to see my final result: thanks to #user1721135 ;)
http://jsbin.com/udoxet/2/edit
Now I'm gonna try and port it to my own website see if that works :)
I am looking to increase the size of the header of a jquery mobile app. When I do that I need the title to be centred. I found that I can add a line like:
line-height: 30px;
to the css, but that is just far to much of a hack. I assume there must be a better way to do it.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
<style type="text/css"><!--
.ui-header {
height: 50px;
}
-->
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>This Needs To Be Centred Vertically</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
The easiest way to vertically center text of a block element is by making the line-height the same as the height of said element. Note that this will only work if you have a single line of text.
line-height: 30px;
height: 30px;
On an inline or table-cell element, you could use vertical-align: middle to achieve the same effect.
Also note that forcing display: table-cell on an element will not work in IE6-7.
In your case, I would suggest going with the line-height/height technique.
You may try with
display: table-cell;
vertical-align: middle;
in your CSS.
You could try something like this:
<div data-role="header">
<div class="ui-bar">
<h1>This Needs To Be Centred Vertically</h1>
</div>
</div>
Doc: http://jquerymobile.com/test/docs/toolbars/docs-headers.html