I'm making a website with the title in a div box at the top of the page. The issue is that when i put a heading in the box it doesn't stay in the box
<div style="width:1000px;height:40px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;">
<h1 style="text-align:center;">
Welcome To A Website
</h1>
</div>
When you create a HTML file, each browser interpret the elements on its way. For example: some browsers have an extra margin config at an <p> or some different line-height property. Because of that, normally, the developers use a Reset CSS (example: http://meyerweb.com/eric/tools/css/reset/). It reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
In your case, h1 by default have some configs that make it go out of the div box (margin and padding, as I checked). You can solve it using: margin: 0; padding: 0; at <h1> element. My suggestion for future projects: use a Reset CSS and you'll have more control in things like that.
Another suggestion: use a CSS file to organize your own styles. Inline styling isn't a good thing when you've a common thing to modify and have to go file by file to do that. With CSS you only change the file and it reflects at all HTML that uses it.
Well, my CSS fix suggestion is:
HTML:
<div>
<h1>Welcome to a Website </h1>
</div>
CSS:
div {
/* Make title go to entire screen*/
width: 100%;
display: block;
/* You visual config */
height:40px;
background:grey;
border:3px solid;
border-radius:10px;
opacity:0.85;
overflow:hidden;
line-height:40px;
}
div h1 {
margin: 0;
padding: 0;
text-align:center;
}
I used width:100%;display:block instead of width:1000px because I assumed that you want a block that occupies 100% width from screen. Working demo: http://jsfiddle.net/brunoluiz/NyLAD/
Well, good luck with HTML and CSS studies!
You can set the margin of your h1 to 0, also note that you should place the styles in some CSS file or right inside the page (between the <style> tags):
div {
width:1000px;
height:40px;
background:grey;
border:3px solid;
border-radius:10px;
opacity:0.85;
overflow:hidden;
line-height:40px;
}
div h1 {
margin:0;
}
Working demo.
Because you specified a specific height for the box in the style. Try removing the "height:40px;" part.
Now the div style looks like this:
style="width:1000px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;"
Fiddle
It looks like the height of the size of the header is too big for the height you set on your div. Try taking out the height from the div's style, like so:
<div style="width:1000px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;">
<h1 style="text-align:center;">
Welcome To A Website
</h1>
</div>
Related
I would like to create a thin line below the main heading in a webpage, which is centered, something like this. How do I go about it as using /hr will create an end-to-end line.
In your example this is done with css and not with a hr-tag
So either you can use the css-style border-bottom as in your example, or you indeed can use a hr-tag which you give some CSS, e.g.:
<hr style="width:40%">
If you want to position the hr, you may need the position-style.
You can try this easily on the w3c example site.
Remember, that the hr-width-attribute (not the style!) is not working under html5 anymore.
You can use HR tag or HR tag with simple css code
Html HR tag :
<center>Your Code Here</center>
<hr align="center" width="50%">
Here HR tag with simple css code:
hr {
width: 50%;
margin-left: auto;
margin-right: auto;
}
<center>Your sample code here</center>
<hr>
Note:
The attributes that aren't supported in the HTML5 spec are all related to the tag's appearance. The appearance should be set in CSS, not in the HTML itself.
So use the <hr> tag without attributes, then style it in CSS to appear the way you want.
You can adjust HR width
<hr width="50%">
Or in the example you gave it is using css property of the div with a bottom border
#yourDiv {
border-bottom: 1px solid gray;
}
you can restyle and add margin to your hr
hr {
border:none;
border-top:1px solid;/* or bottom */
margin:1em 15%; /* 15% or whatever fixed or % value that suits your needs*/
}
body {text-align:center;}
<h1>Any content before</h1>
<hr/>
<p>any content after</p>
width a fixed width margin is involved too
hr {
border:none;
border-top:1px solid;/* or bottom */
margin:1em auto;
width:17em;
}
body {text-align:center;}
<h1>Any content before</h1>
<hr/>
<p>any content after</p>
You can also use the border-bottom of any tag ...
h1 {
border-bottom:1px solid;
padding-bottom:0.5em;
display:table; /* to fit to content's width else margin or a fixed width works too */
margin:1em auto; /* if not display:table use width or margin values as first snippet */
}
body {text-align:center;}
<h1>Any content before</h1>
<p>any content after</p>
HTML:
CSS:
. hr {
width: 50%
color: #222
}
html:
<h1> Your code </h1>
<hr>
CSS:
hr {
align-content : center;
width : 20%;
margin-left : auto;
margin-right : auto;
}
The hr style settings are to be done in CSS not in the body.
Edit: I used width to control the length of the horizontal line that will appear below my heading or text. Margin-left and margin-right :auto, automatically placed the line in the center where as normally the line would begin at one end of the page and end in another.
I'm sure someone's done this before, but I can't come up with a good enough search query to find anything about it.
I'd like to align the baseline (not the bottom of the text element, the baseline of the text itself) to the top of another div. This also means I'd like the descenders to intersect with the other div below it.
HTML looks something like this:
<div id="text">text</div>
<div id="box"></div>
So I want .text to have its baseline directly on top of the top edge of .box, and I want the descenders (like "g") to intersect into .box. I was trying to use the vertical-align property in CSS but it wasn't working. I have a feeling that's what I need though. Any ideas? Thanks!
See this image, the gray box would be .box and the text part is .text. Notice the descenders going down into the box and the baseline having full contact with the box.
Like this, using line-height?
#box{
display:block;
width:100%;
height:200px;
background-color:#ccc;
}
#text{
text-align:center;
font-size:48px;
line-height:30px;
}
<div id="text">TEXT<em>pgjiq</em></div>
<div id="box"></div>
The difficulty is that the height of the font isn't determined by, say, the height of the capital letter T -- it also includes the ascenders and descenders.
There's no way to make CSS cognizant of the amount of space taken up by the ascenders and descenders. Nudging it pixel-by-pixel is your best bet.
If you're worried about this being preserved on different screens and on zooming in and out, it should be fine: browsers are very good at preserving the proportions among dimensions.
That said, the only way to be 100% certain is to use an image or an SVG.
Try this:
<!DOCTYPE html>
<html>
<head>
<style>
* {font-family: tahoma; font-size: 14px;}
#text {margin-bottom: -3px;}
#box {background-color: #ddd; width: 100%; height: 100px;}
</style>
</head>
<body>
<div id="text">TEXT gjipq</div>
<div id="box"></div>
</body>
</html>
The way I was able to accomplish what your image is displaying is by using a negative margin on the bottom box.
*{
margin: 0;
}
.text{
background: lightgrey;
font-size: 24px;
}
.box{
background-color: tomato;
width: 100%;
height: 40px;
margin-top: -12px;
}
Codepen
This is my CSS code:
#outer {
width:580px;
padding:10px;
float:left;
}
.inner {
width:560px;
padding: 10px;
background-color:#fff;
color:#666666;
}
And the HTML:
<div id="outer">
<div class="inner">
... a lot of content
</div>
</div>
My problem is the background-color for the inner div doesn't extend to fill the entire div alongside its content. I've had this problem quite often, and my solution has usually been to specify a height for #inner, which makes the background fill #inner accordingly. However, I don't want to specify a height explicitly because it's dynamic content. What should I do to make the background-color fill the div as it extends?
Set the position of each element, with the inner element needing to be absolute, and then just tell the inner div to always fill the outer one with height: 100%. The only care that you have to take with this is that setting the position of inner to absolute will then make it ignore floats, but presumably you are taking care of that with outer.
(I changed the background color to red in this answer to make it more obvious what is going on.)
This is my CSS code:
#outer {
position: relative;
width:960px;
height: 500px;
}
.inner {
position:absolute;
height:100%;
width:400px;
background-color: red;
}
And the HTML:
<div id="outer">
<div class="inner">
... a lot of content
</div>
</div>
I couldn't replicate your issue. If you don't specify a height for '.inner', the background color should extend dynamically as '.inner' fills with content.
You might be having an issue due to a lack of a CSS reset. Each browser has a set of standard css rules it applies to all pages, unless you override these rules.
I recommend adding a CSS reset in your above all your current css.
A very basic but popular reset is by Eric Meyer, found here: http://meyerweb.com/eric/tools/css/reset/
Let me know if that helps, and if not try posting an image of what you are experiencing.
Btw, this is how your code renders for me:
The padding of the outer element will always show the background color of the outer element...
Just remove the padding there.
#outer {
width:580px;
/* padding: 10px;*/
background:red;
border:1px solid green;
}
.inner {
width:560px;
padding: 10px;
background-color:lightblue;
color:#666666;
}
I know it sounds really weird, but I'm trying to code a website with very little CSS knowledge. It's just a test website, so that I can get into the language a bit more, but I'm having some troubles. I can't find the answers anywhere. In case necessary, I've included the HTML and CSS files at the bottom.
1. Center Body
I was wondering how to center the body of my website? I know it seems simple, but I've looked on every single Google link and I can't find a solution. When I zoom in to test my website on 175% zoom increase, as that's what most monitors have at least, I notice that my browser is scrolling in to the left side of the website, rather than the center. I would like the elements of the website to be in the center, so that it doesn't end up with a blank space on the right like YouTube has for larger monitors. However, I have no idea on whether or not there is there a way I can make the website zoom to the center?
2. Multiple Images
When I was slicing the website layout I made, I took three images from one of the 'rounded rectangle' shapes. My aim is to make it so I can have the shape become expandable, meaning that it'll be a small box [ ] for small numbers, but if the number has more digits, the box can expand without breaking the website. Because of this, I sliced the LEFT and RIGHT side of the content box, as well as a 1px inside which I hoped to expand. I have no idea where to look for a tutorial, however, on how to make them all work together. If somebody could point me in the right direction, I'd be extremely grateful.
3. Following
Resolved - a huge thanks to Nicole Bieber who helped me out! :-)
Many thanks.
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> .. </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
..
<div id="header"></div>
<div id="navigation">
<div class="founders2">
<div id="left_content">
<div class="news">Latest News & Information</div>
<div id="right_content"></div>
</div>
<div id="footer"></div>
</body>
</html>
CSS:
#logo {
background:url(images/main/logo.png) top left no-repeat;
width:391px;
height:148px;
font-size:0px;
margin:-10px 0 0 0;
float:left
}
body {
margin:0px;
padding:0px;
background:url(images/main/bg.gif) repeat;
#31
}
#header {
margin:0 auto;
width:100%;
height:147px;
background:url(images/main/header_bg.gif) repeat-x;
}
#navigation {
width:100%;
height:500px;
background:url(images/siteSlice_13.gif) repeat-x;
}
#founders1 {}
#left_content {
float:left;
width:910px;
height:100%;
}
#right_content {
float:right;
width:490px;
height:100%;
}
#footer {
margin:0 auto;
clear:both;
width:100%;
height:77px;
background:url(images/siteSlice_96.gif) repeat-x;
}
/**
* Needs to be aligned vertically.. no idea how.
**/
.news {
font-family:ubuntu;
font-size:25px;
color:#FFFFFF;
text-shadow: 2px 2px #000000 12;
text-align:left;
text-indent:15px;
width:100%;
height:100%;
background:url(images/main/news_header.gif) no-repeat;
margin:100px;
}
.founders2 {
background:url(images/main/founders_navbar.gif) no-repeat;
width:265px;
height:52px;
margin:0 0 0 600px;
}
Anything not in the /main/ image folder hasn't been re-edited by myself yet, but is still a basic image that should act in the same way as when a new one replaces it.
Centered Page Content
One way you could center the body of a fixed width page layout with could be done with Auto Margins, as I will show in the following example
This is a basic example with only a div element which will be our website container.
You can apply a fixed with either to the container or to the body, and apply the automatic margins to the container itself...
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="center.css" rel="stylesheet" type="text/css">
<!---
other header and meta stuff ...
--->
</head>
<body>
<div id="box_content">
<p>
My Content Area.
</p>
</div>
</body>
</html>
and the CSS for the above:
CSS for Center Aligned Content using Centered Body
In this CSS example for the above HTML code, we center our container (div) element by applying a fixed width to the Body element, and assigning Auto margins to the same element. The margins will expand evenly on both sides to preserve the fixed 800px with, thus centering the page:
#charset "utf-8";
/* CSS Document */
body{
/*
Applying a fixed width with automatic margins will center the page:
*/
width: 800px;
margin-left:auto;
margin-right:auto;
/*
and whatever...
*/
margin-top: 5px;
margin-bottom: 0px;
/*
Here we have a gray background so we can see the centered content area
*/
background-color:#CCC;
}
/*
Our content area will be white so we can see it centered over the gray background.
*/
#box_content{
background-color:#FFF;
overflow:auto;
padding:5px;
}
However, you can also apply the fixed width to the container itself instead.
The following example works with the above HTML code.
CSS Example with centered div element
#charset "utf-8";
/* CSS Document */
body{
/*
Here we have a gray background so we can see the centered content area
*/
background-color:#CCC;
}
/*
Our content area will be white so we can see it centered over the gray background.
*/
#box_content{
/*
Applying a fixed width with automatic margins will center the page,
will also work on the container itself:
*/
width: 800px;
margin-left:auto;
margin-right:auto;
/*
and whatever...
*/
margin-top: 5px;
margin-bottom: 0px;
background-color:#FFF;
overflow:auto;
padding:5px;
}
Both of the above CSS examples look exactly the same. (Should look the same on all the modern web browsers ).
There are various other ways to center using CSS ( including setting Position to 50% with a -400 margine, but this breaks on some renderers ).
The approach I have demonstrated is simply my simple but my preferred approach to centered fixed width layouts.
Also, I removed the 100% width values on your nested elements that dont need them ( div elements will default to 100% width anyhow )
100% Height will not work, a div element will not expand vertically to its container, unless you use absolute positioning ( but will expand to page size, and not the parent container size ). DynamicDrive has examples on how to do this.
Also looking at your Source, I suggest changing the following:
font-family:ubuntu;
Because it is not a font family recognized by all operating systems, so visitors to your web page will most likely not see the same fonts you see on your own system. unless you use ServerSide Fonts.
If you don't use a server side font, it would be best to stick to common fonts and font families that (usually) exist on all major operating systems if you want all users on all major operating systems to see the same font regardless of whichever web browser they use.
3 Slice Buttons
One again - there are more than one way to do this. One of the easier ways to do it would be to layer 3 divs and apply a slice to each layer. The following example is from a simple resizable button in one of my own template designs, a simple box-model button to say the least.
Note: I think nesting div elements in a << a >> hyperlink is considered a bad practice? Although I do it anyhow ... I could be wrong.
HTML
<a href="contact.php" style="float:right">
<div class="b_1"><div class="b_2"><div class="b_3">
Contact
</div></div></div>
</a>
The CSS for the above button:
/*
Contains the left slice of the button:
*/
.box_nav a .b_1{
float: left;
margin-top: 3px;
background-image: url(ui/ui_19.png);
background-repeat: no-repeat;
}
/*
Contains the Right slice of my button:
*/
.box_nav a .b_2{
background-image: url(ui/ui_23.png);
background-repeat: no-repeat;
background-position: right;
}
/*
COntains the tiled center slice of the button
*/
.box_nav a .b_3{
background-image: url(ui/ui_21.png);
height: 43px;
margin-right: 10px; /* This margin is the same width as the RIGHT slice */
margin-left: 10px; /* This margin is the same width as the LEFT slice */
line-height: 40px; /* my way of centering text vertically in the button */
text-align: center;
/*
prevents buttons with more than one word ( has spaces ) from breaking into two lines
*/
white-space: nowrap;
}
.box_nav a:hover .b_1{
background-image: url(ui/ui_24.png);
}
.box_nav a:hover .b_2{
background-image: url(ui/ui_28.png);
}
.box_nav a:hover .b_3{
background-image: url(ui/ui_26.png);
}
As seen above, this is a box model structure. The box_nav itself however requires "overflow:auto;" or "overflow:hidden;" however if height is not set explicitly.
The above button from my actual example looks like this:
Final Section
As for your 3rd question, I don't actually understand what you are asking, and the html/css combination breaks in my browser when I copy your code. ( also I cant see it properly because I also don't have your images. I'm not sure what you were trying there, but i looks like your were trying a 3 column layout?
Your html for this section pretty much completely falls apart in my browser ( and also in dreamweaver )
UPDATE:
As requested by you, here are two ways to do fluid layouts:
In this example, you can use the same automargins with a fluid width like this ( simply modify the fixed 800PX width to a fluid width, such as 80%
width: 80%;
margin-left:auto;
margin-right:auto;
If you want fixed margins with a fluid layout, you can simply set margins, but do not set a width:
width: auto;
margin-left:100px;
margin-right:100px;
Currently I have:
body
{
background-image:url('images/background');
background-color:#000;
background-position:center;
background-repeat:repeat-y;
padding-right: 75px;
padding-left: 75px;
}
How can I get the background to act more like this:
body
{
background-image:url('images/background');
background-color:#000;
background-position:center;
background-repeat:repeat-y;
}
while still having padding for things within the body other than the background?
Basically, I want the background to not be effected by the padding settings, unlike the text, images, etc set within the body.
Rearrange things a little, so you have a new top-level container within your body, so that...
<body ...background goes here ...>
<div id="therealbody" ... padding goes here ...> ... content here ... </div>
</body>
Use Box-sizing property to take care of the padding as well as margins