I have been trying to rack my brain as to why I can't seem to apply any attributes to my H1 tag... I couldn't get it to work and started trying to put a border around it so I could see where the section was actually at. But I couldn't even get the border to appear on the section. At first thinking that maybe you couldn't put a border round a section because it was possibly more of a metaphorical grouping and not an actual "physical" grouping... I then tried putting it within a div tag and an article tag, to which I still had no success...
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<section id="under_banner"></section>
<section id="main_pic"></section>
<section id="title">
<h1>The Adventures of Chris Wakeling!</h1>
</section>
</body>
</html>
And the CSS is...
/* Basic Underlay */
html {
background-color: #03113D;
z-index: -2;
}
#under_banner {
border-radius: 5px;
background-image: url("images/sydney.jpg");
background-position: 0px -180px;
background-size: cover;
margin: 0px auto;
height: 350px;
width: 1100px;
z-index: -1;
}
/* Main Body */
#main_pic {
background-color: #000;
width: 550px;
height: 600px;
}
h1 {
text-align: center;
width: 550px;
height: 600px;
margin: auto;
border: 1px solid #999;
background-color: white;
}
Basically if you open up the code in JSFiddle, in the result there is supposed to be an empty space due to a picture. but I want the "Adventures of Chris Wakeling" to be centered.
Any help would be appreciated...
Cheers in advance.
add this css style
#title h1 {
margin: 0 auto;
}
it will make your h1 come to the center.
Add a closing brace } to #under_banner
the title is centered in relation to body but <section id="under_banner"></section> = width: 1100px; is larger than the body is not.
you can put body {width: 1100px;} and greatest #title will be centered
<body>
<section id="under_banner"></section>
<section id="main_pic"></section>
<h1 id="title">The Adventures of Chris Wakeling!</h1>
</body>
css
/* Basic Underlay */
body {
background-color: #03113D;
}
#under_banner {
border-radius: 5px;
//background-image: url("images/sydney.jpg");
background-color: red;
background-position: 0px -180px;
background-size: cover;
margin: 0px auto;
height: 350px;
width: 1100px;
z-index: -1;
}
#main_pic {
background-color: #000;
width: 550px;
height: 600px;
}
#title {
text-align: center;
color: white;
width: 550px;
margin: 0 auto;
border: 1px solid #999;
background-color: #000;
}
Take a look here for some layout modifications. I think this is what you are likely looking to achieve.
JSFiddle
<body>
<section id="under_banner">Under Banner</section>
<div id="wrapper">
<section id="main_pic">Main Picture Section</section>
<section id="title">
<article>
<h1>The Adventures of Chris Wakeling!</h1>
</article>
</section>
</div>
The problem is, unless you give a frame of reference such as a width to center to, it keeps the block only as big as it is needed. Adding a wrapper around elements that need to stay contained (I notice your banner was expected wide) can help you keep a reference to revert to.
Related
Hi i wanted to know how can the tilted style of the header section present in the image can be recreated using element and CSS?
body {
margin: 0px;
background-color: #FFEF4C;
}
#header {
background-color: #FF3578;
height: 300px;
transform: rotate(20deg);
}
<div id="header"></div>
i want to get rid of those yellow gaping and want the header div to cover all the upper area....but i dont know how stupid of me
I suppose you want something like this:
body {
margin: 0px;
background-color: #FFEF4C;
}
#header {
background:
linear-gradient(to bottom left,#FF3578 49.5%,transparent 50%);
height: 200px;
}
<div id="header"></div>
I have solved this by adding margin property in your code check this out:
<html>
<head>
<style>
body {
margin: 0px;
background-color: #FFEF4C;
}
#header {
background-color: #FF3578;
height: 300px;
margin-top: -30px;
transform: rotate(20deg);
}
</style>
</head>
<body>
<div id="header"></div>
<body>
</html>
Note that margin-top: -30px; did the magic.
I tried to create a full screen website without scrollbars and have problems defining the margins for that. Given is a minimum example:
html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
}
h1 {
background: gray;
}
<body>
<h1>Heading 1</h1>
</body>
Why do I get the yellow background of the html element in the top of the side? Even more surprising to me is that the yellow part disappears, if I add text before the h1 element.
html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
}
h1 {
background: gray;
}
<body>
Add some text and the yellow part disappears.
<h1>Heading 1</h1>
</body>
Is there any idea to avoid the yellow part in the top without adding text before the heading element?
Your body element is a non-floating block-element, just as the contained h1 element. Therefore the size/position of the bodyelement adapts to its child-element h1, which has a margin (margin-top) defined as default.
There are multiple solutions for your problem, one is to make the body-element float. The advantage of this is (compared to removing the margin on the h1) is, that i will work the same way, even if a different element with a margin is inserted.
html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
float: left;
width: 100%;
}
h1 {
background: gray;
}
<body>
<h1>Heading 1</h1>
</body>
html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
float: left;
width: 100%;
}
h1 {
background: gray;
}
<body>
<h1>Heading 1</h1>
</body>
Just put margin-top:0; on your h1. Example here
I recommend using a CSS reset to avoid problems like this. Eric Meyer's is very well-known and simple.
When starting a new project or as a general rule, always try to reset a lot of the predefined css values that browsers "add". There's some "css reset" stylesheets already created, which you can find with a google search, but for a simple solution you can always start with:
* { margin: 0; padding: 0;}
Then you can always add additional rules that will affect all elements in your document like "font-family: sans-serif" etc.
That way you're sure that you have a solid starting point without having too many different looks across browsers.
Later on you can then add the rules more explicitly to the elements that need styling
this is how I would do a full screen website and it is very simple and clean:
<body>
<h1>Main heading</h1>
</body>
The CSS code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: green;
height: 100vh;
}
h1 {
color: #fff;
font-size: 40px;
}
So, if you give to your body a height of 100vh (viewport height) it will stay 100% of the window, no matter the size of it.Like this you won't have a problem with scrollbars.
This is why often something like normalize.css is added to a project to avoid these things with different browsers etc. height: 100vh; would work. To get ride of scroll bars you can also use overflow-y: hidden; or overflow-x: hidden; depending on the situation.
Try this:
.img-responsive { background-size: 100%; }
OR
.img-responsive { background-size: cover; }
Instead of img tag, use background-image for fullscreen image.
<header>
<div class="menu_area">...</div>
</header>
html, body, header {
height: 100%;
}
header {
background-image: url('images/image1.jpg');
background-size: cover;
}
I'm attempting to learn HTML and CSS, but have run into a tiny stumbling block.
I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>Testing My HTML and CSS</title>
<style>
* {
padding: 0;
margin: 0;
}
.header {
background-color: black;
height: 100px;
width: 100%;
}
.header h1 {
margin-top: 0;
text-align: center;
color: white;
height: 100px;
width: 100%;
}
.sidebar {
background-color: #ebebeb;
position: absolute;
width: 200px;
height: 100%;
}
</style>
</head>
<body>
<div class="header">
<h1>Hello, World!</h1>
<div class="sidebar">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</body>
</html>
which can be ran here.
I want to have the <h1>Hello, World!</h1> in the center of the .header. I've tried playing with the margin-top in .header h1, but it moves the entire .header.
Sorry for such a simple question -- I'm a complete newbie.
If your're not planning to add more elements to the header, you can just add line-height: 100px; to the .header h1 ruleset. That's it...
Vertical align can be tricky, if you don't want to mess around with a lot of code, this is the shortest way to accomplish it. As a general rule, to center text vertically into an element, just make its line-height equals to the element's height (unless you have some padding or margin changing stuff).
Use line-height instead as following:
.header {
background-color: black;
height: 100px;
width: 100%;
line-height:2;
}
Please try this demo
or you can try this using
.header{
line-height:3;
}
Right now I have...
<header id="background-color">
<img src="header_image.gif" alt="header">
<h1>Header</h1>
</header>
and the relevant CSS is...
header {
background: #0072bc;
width: 70%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#background-color {
background: #0066CC;
width: 100%;
}
This puts the image above the h1 obviously. What I'd like to do is left-justify the image and have the h1 centered relative to the whole page (not just the remaining space).
And when I say left-justify, I mean relative to the body and header which are set to be 70% with auto margins. I've got no idea how to do this, I'm totally new to web design.
Thanks.
You can add margin-right: -100%; to image, so header text will not touch the right edge of image. and will align center in header. check this fiddle
header {
background-color: #0072bc;
width: 70%;
text-align: left;
padding: 10px;
}
Look at the jsfiddle
http://jsfiddle.net/EScBs/
A quick Answer.. May need to fine tune...
Add wrapping div...
<header id="background-color">
<div id="container">
<img src="Beach_Party.jpg" alt="header">
<h1>Header</h1>
</div>
</header>
Try to use relative positioning and absolute positioning of the child elements
<style>
header {
background: #0072bc;
width: 70%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#background-color {
background: #0066CC;
width: 100%;
}
img {
float:left;
text-align:left;
position: absolute;
top:0;
left:0;
}
h1 {
z-index:10;
}
#container {
position: relative;
}
</style>
It worked for me.. Adjust it to suit your case.. Hope it helps!
This is my 2nd attempt at getting this fixed! I fixed the first problem with help from Stobor, now this second problem seems to be a bit tricky, but it cant be that hard right?
As you can see here http://dekkro.no-ip.org/ I have a completely centered image, and a styled div with a login box.
What I am trying to achieve is that the login box, is ALWAYS 100% dead center of that image. It is centered for me, but for a lot of people with smaller resolutions it is not.
Here is the problem: http://dekkro.no-ip.org/problem.png
Is there a way to fix this? My code is a bit messy but understandable. I have been trying to do this since 5am and it's now 5pm! Struggling a bit here!
Thanks!
Here you go...tested in firefox, ie9, chrome and opera. Hope this works in the problem resolution or gives you a start.
screenshot
<html>
<head>
<style type='text/css'>
html, body{
margin: 0px; /* some browsers add a margin at the top, get rid of it to have proper positioning */
}
body{
background-image: url('blahbg.png');
}
.Centered{
margin-right: auto;
margin-left: auto;
align: center;
}
.LayoutContainer{
background-image: url('blink.gif');
background-position: bottom left;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
.BodyContainer{
background-image: url('testimage.png');
background-repeat: no-repeat;
margin-top: 50px; /* to bring the layout-body down a bit you want this */
height: 425px;
width: 690px;
}
.MiddleContainer{
text-align: center;
padding-top: 20px;
width: 200px;
}
.LoginContainer{
border: 1px solid #000000;
background-color: #FFFFFF;
margin-top: 20px;
height: 230px;
}
.InfoContainer{
border: 1px solid #000000;
background-color: #FFFFFF;
margin-top: 20px;
height: 30px;
}
</style>
</head>
<body>
<div class='LayoutContainer'>
<div class='BodyContainer Centered'>
<div class='MiddleContainer Centered'>
<div class='LoginContainer'><img src='logo.png' /></div>
<div class='InfoContainer'></div>
</div>
</div>
</div>
<body>
</html>