This may be the simplest question ever, but try as I might I simply couldn't figure it out. I'm working on a website right now and I wish to use as few <div> elements as possible to keep the HTML pretty and easy to edit. At the moment I essentially have:
<html doctype etc etc>
<head>
<title and meta tags>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="body"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
Very simple and elegant, yes? However the client wants their header to consist of a single large image which contains their company name and logo. So my options were pretty clear - either use an <img> tag, or set the background-image property on the header <div>. However then I got to thinking about SEO. For Google's sake it would be nice if the header <div> contained an <h1> element with her website's title, but then this element would have to be hidden so that human users only see the background image.
Although if you were to use the display:none; css property then the entire <div> disappears, including the background. Is there a good way to hide the contents of a <div> without hiding the <div> itself?
Have you tried to apply the hide on the H1 itself?
<div id="header">
<h1>Company title</h1>
</div>
Your style would be: #header h1{display:none;visibility:hidden;}
UPDATE
Apparently, we're both just having one of those days. If you want to make the H1 truly SEO/Screen reader friendly, it would be better to do this with your CSS:
#header h1{
width:XXXpx;
hight:XXXpx;
background:url('image/location.png');
text-indent:-9999px;
overflow:hidden;
}
This way your text is actually there on the page and rendered, it's just kind of off screen.
You could replace #header div with h1 if you want this tag, set background image on said h1 and even put some text in it (company name) and use text-indent to hide it.
Plus, in your quest to minimize number of elements you can use body as a wrapper, and if you need full page background just set in on html element.
Set display: none on the H1 tag rather than the div, and use the background image on the div.
Related
I'm making an ASP.NET MVC5 web app. The default template uses bootstrap, which is fine for almost all of the pages. However I need one page to have width: 100%.
The view I would like to use this is a partial view, so it will be rendered in the .container (see code below), as well as the other partial views.
<div class="container">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
All of them are fine to be fluid, but I need this one to be 100% width. What is an elegant way to do it?
In your partial view, you can use jQuery to modify the CSS of the container div. This would change the width whenever that view is rendered, but would no effect on other pages.
EDIT: As the OP pointed out, Bootstrap's JS will reset the width on window resize. So we have to do the same:
$(document).ready(function(){
setWidthOfContainer();
$(window).resize(setWidthOfContainer);
});
function setWidthOfContainer(){
console.log("Setting width of container to 100%.");
$('div.container').css('width','100%');
}
See the fiddle here: http://jsfiddle.net/GqRd7/
I had a similar problem, where the container was used in the Layout and fine for most pages, but I wanted an odd full width element within that container.
As of Bootstrap 3, you can use the .container-fluid class for 100% width content. However, using this within .container does nothing, as it is limited by the .container width. Here are a few options/workarounds I've come across:
Use sections
If the 100% width content is always used at the beginning or end of the container content, you could define sections in the layout page, and insert the 100% width element in there.
Layout:
<div class="container-fluid">
#RenderSection("containerFluid", required: false)
</div>
<div class="container">
#RenderBody()
</div>
View:
#section containerFluid
{
<div>Full width content.</div>
}
<div>Other content</div>
In your case, if you had no other content on that one page, you could just put the whole page in the section.
Use another layout page
If it's a whole page that needs to be full width, you could just get it to use a different layout. Use partials for the common code and change the .container element to .container-fluid.
Normal layout:
<!DOCTYPE html>
<html lang="en">
#Html.Partial("_LayoutHead")
<body>
#Html.Partial("_Navbar")
<div class="container">
#RenderBody()
</div>
#Html.Partial("Footer")
</body>
</html>
Alternative layout
<!DOCTYPE html>
<html lang="en">
#Html.Partial("_LayoutHead")
<body>
#Html.Partial("_Navbar")
<div class="container-fluid">
#RenderBody()
</div>
#Html.Partial("Footer")
</body>
</html>
Manually close the container and reopen later
I wouldn't really recommend this one, as it's very hacky, and will show up errors, but it does compile and work. This can be used if you have an element somewhere in the middle of the content that you want to be full width for whatever reason.
View:
<div>Some normal content here.</div>
</div> <!--This shows an error for missing a starting tag. The actual starting tag is on the layout page.-->
<div class="container-fluid">
<div>Full width div</div>
</div>
<div class="container"> <!--This shows an error for missing an ending tag. It actually gets closed using the end tag in the layout page-->
<div>Back to normal</div>
I managed to solve it by making the position of the rendered content absolute and left: 0, but <footer> is hidden behind it, so I have to take care of that one separatelly (or remove it altogether). Not the elegant solution I was wishing for, but works.
You can use the razor code to change the page's style in _Layout.cshtml file.
<div class="container" style="#(ViewData["Title"] == "Page1" ? "max-width: 100%;" : "")">
Replace "Page1" with your real page title.
I have a #info div element which shows some text strings like below:
<body>
...
<div id="info">
ABCDEFGHIJKLMNOPQRSTUVWXYZ ...
</div>
</body>
I would like to CSS the #info div to position it at the bottom center of the page, so I did the following thing:
#info{
width:100px;
margin:0px auto;
}
With the above CSS, the #info div is on the bottom center of the page, BUT only part of the text strings are showing (only shows '...' without the 'ABCDE..' showing).
I thought it maybe because of the width:100px is not enough to show all the texts, so I change to width:200px, but surprisingly after I increase the width, nothing was showing on the bottom center at all. Why?
-------------------- UPDATE ------------------
I have another div above the #info div, if this is the reason, then I would like to ask how to CSS the #info div to locate it below the upper div?
My best guess is that you have something above it that is overlapping and hiding part of the DIV. With the current text, it is splitting on the space between the letters and the dots, putting the dots on a second line. That part of the DIV is displaying below something else with the first part being hidden. When you increase the width to 200px it's wide enough to fit everything on one line and all of it disappears. You might want to try adding a clear: both and see if that pushes it below whatever is hiding the text. Sometimes adding a border (or using outlining of elements with a browser developer plugin) can help diagnose what is going on. Check your z-index as well to make sure that you have things in the proper plane to do what you want.
<html>
<head>
<link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<section>
<div id="info1">
asdgfawregawregawregawregawregawregaweg
</div>
<div id="info2">
asdgfawregawregawregawregawregawregaweg
</div>
</section>
</body>
</html>
css file:
#info1 {
color: red;
}
#info2 {
width:100px;
margin:0px auto;
}
So... all displayed.
Maybe you give not enough information...
I had this issue, I accidentally set font-size:0 to zero in body and Html , once I removed it text where visible
I am trying to make something look like following (don't concern color here. my concern here is the shape);
I tried something with following code but didn't succeed!
<html>
<head>
<style type="text/css">
#header{border:3px solid gray;padding:10px;}
#header-left-container{border:1px solid gray;float:left;width:30%;}
#header-right-container{border:1px solid gray;float:right;width:69%;}
</style>
</head>
<body>
<div id="header">
<div id="header-left-container">
pooo
</div>
<div id="header-right-container">
bla bla bla.....
</div>
</div>
</body>
</html>
I know this can be done with table easily but I don't wanna use table in my application where I can do the same with div elements.
any suggestion here?
http://jsfiddle.net/j4DnG/7/
What you need to do is clearing the area arround the 2 floated divs.
Doing this by modern technuiqe is giving the parent the property of Overflow:Hidden or Auto (what ever fitting you more. I recommend hidden)
In the past people user clearfix (google on that). Todays we use that approach.
As well people used to put clear:both after the creation of the two elements. That has a negative side- 1 more element in the dom.
You need to add overflow:auto; to the #header css; without that divisions don't expand to contain floated elements.
your code looks fine...
suggestions:
Just Add clearfix after floating divs so as they will be contained inside the parent object like:
<style>.clarFix{clear:both;}</style>
<div class="clearfix"></div>
Add
<br style="clear:both" />
after second div. Or make the container div float: left. Or use one of the css frameworks if You don't want to become css master before You create a webpage. One is http://960.gs/
Do you use firebug? go on twitter.com and see how they have defined a left and a right container is the style sheet . They're not using table to implement it. just div
Just replace the float: right; declaration with a margin-left: 30%; declaration for #header-right-container. You don't need to float both of them. This way, you will only need to clear floats if the left block is taller than the right block. See this fiddle.
Is it possible to float an object over an image using css? I want to place a form over an image (that isn't a background). Float doesn't work, but is there some variable that does provide this function?
When you float an object it pushes the text to either side of the object. What I am looking for is something that will not do this, that will just float without regard to what is underneath it.
What you are looking for is not what floating elements do. A floating element is still part of the document flow, and you want an element that isn't.
Use absolute positioning to take an element out of the document flow, that way it won't push other elements away and you can place it on top of other elements:
<div style="position:relative">
<img src="image.jpg" alt="" />
<div style="position:absolute;left:0;top:0;">
This text is on top of the image
</div>
</div>
The elements with position:relative acts as the origin for the absolutely positioned elements inside it, so that the text is placed on top of the image and not at the top left corner of the page.
If you make the image in question the background image for the div or (yes, I'm saying it) table used to format the form, then the form will "float" over the image.
If that is not sufficient for your needs, check out http://w3schools.com/css/css_positioning.asp
Try z-index property
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>
I prefer working with CSS based design, but as more of a back end coder my CSS skills are a bit weak. When I get involved with layout, I tend to fall back on table based formatting because my mind has been warped by years of table based abuse. There's one particular problem that I always trip over. What is the best CSS alternative to:
<table width="100%">
<tr>
<td align="center">
content goes here
</td>
</tr>
</table>
I sometimes use:
<div style="width:100%; text-align:center">content</div>
But this doesn't seem quite right. I'm not trying to align text, I'm trying to align content. Also, this seems to have an effect on the text alignment of enclosed elements, which requires tweaking to fix. One thing I don't get is: why isn't there a float:center style? It seems like that would be the best solution. Hopefully, I'm missing something and there is a perfect CSS way to do this.
You are right that text-align is intended for aligning text. It's actually only Internet Explorer that lets you center anything other than text with it. Any other browser handles this correctly and doesn't let block elements be affected by text-align.
To center block elements using css you use margin: 0 auto; just as Joe Philllips suggested. Although you don't need to keep the table at all.
The reason that there is no float: center; is that floating is intended to place elements (typically images) either to the left or the right and have text flow around them. Floating something in the center doesn't make sense in this context as that would mean that the text would have to flow on both sides of the element.
I would recommend putting a <div> into your <td> and setting the style attribute to style="width: 200px; margin: 0 auto;"
The catch is that you must set a fixed width.
Edit:
After looking at the question again, I would recommend scrapping the table entirely. Just use a <div style="width: 200px; margin: 0 auto;> as I suggested and no need for a table.
Here is a good resource for centering using CSS.
http://www.w3.org/Style/Examples/007/center
This demonstrates how to center text, blocks, images and how to center them vertically.
Where do you find yourself commonly doing this? For me - I am most often trying to center the entire design of the site, so I usually do this:
<html>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
body {text-align:center;}
#wrapper {margin:0 auto; text-align:left; width:980px;}
This will center the entire design on the page at 980px width, while still leaving all of your text left aligned (as long as that text is within the #wrapper element).
Use display:inline-block to enable text-align:center and center content without a fixed width:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Centering</title>
<style type="text/css">
.container { text-align:center; }
/* Percentage width */
.wrapper { width: 99%; }
/* Use inline-block for wrapper */
.wrapper { display: inline-block; }
/* Use inline for content */
.content { display:inline; }
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="wrapper">
<div>abc</div>
<div>xyz</div>
</div>
</div>
</div>
</body>
</html>
d03boy's answer is correct for the right way to center things.
To answer your other comment, "Also, this seems to have an effect on the text alignment of enclosed elements, which requires tweaking to fix." That's the nature of how CSS works, setting a property on an element affects all of its children, unless the property is overridden by one of them (assuming the property is one that is inherited, of course).