I have a dynamically created header on a page. Sometimes, there are left and right buttons to the sides of it, sometimes only left or right, and sometimes none.
Is there a way to center the main text and keep it centered when adding other elements next to it? Currently, when I add the left/right buttons, the whole assembly is centered. If I only add one button, the whole thing is shifted off to one side.
How do I keep the main element centered but add other elements around it?
This works fine:
<h1>
<img src="left.png" />
Main Title
<img src="right.png" />
</h1>
This doesn't work:
<h1>
<img src="left.png" />
Main Title
</h1>
I discovered an answer to my question incase anyone in the future finds this post.
Keep the element in the markup (HTML), but style it using CSS to visibility: hidden instead of display: none. This keeps the formatting on the page, but doesn't render the object to view.
visibility: hidden NOT display: none
Read this article for more information...
This could be a solution:
<!doctype html>
<html>
<head>
<title>Select Test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
width: 100%;
position: fixed;
left: 0px;
top: 0px;
}
h1 {
text-align: center;
width: auto;
line-height: 53px;
}
.left {
position: fixed;
top: 5px;
left: 5px;
}
.right {
position: fixed;
top: 5px;
right: 5px;
}
</style>
</head>
<body>
<div id="header">
<img class="left" src="http://files.softicons.com/download/internet-icons/user-icons-by-2shi/png/48/user1.png" />
<h1>My Title</h1>
<img class="right" src="http://files.softicons.com/download/internet-icons/user-icons-by-2shi/png/48/user1.png" />
</div>
</body>
</html>
But you can find many more. Try to remove right or left img and title should remain centered.
P.S.
If you don't want a fixed header, change #header to
#header {
width: 100%;
margin-top: 0px;
margin-left: 0px;
}
Related
I just want the footer to appear on top of the background image. There is a background image which is the color and a logo of the company full screen except of the bottom 2 cm. There I want simple text with a link. Will do that myself, but cant get the text on top of the background color or background image.
Here is the HTML:
<link href="voorblad.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.poptrox-1.0.js"></script>
<script type="text/javascript" src="static_init.js"></script>
</head>
<body>
<div id="bg1"></div>
<img alt="full screen background image" src="gallery/voorblad.jpg" id="full-screen-background-image" />
<div id="wrapper">
</div>
<footer>
<p><h2>Framing your memories. Enter here. </h2></p>
</footer>
</body>
</html>
And here is my css:
#charset "utf-8";
/* CSS Document */
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow-y:hidden;
}
#full-screen-background-image {
z-index: 2;
min-height: 90%;
min-width: 1024px;
width: 100%;
height: auto;
position: relative;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
#bg1 {
min-width: 1255px;
width: 100%;
height: 1090px;
background: url(images/bg1.jpg) top center no-repeat;
position: absolute;
top: 0;
z-index: 1;
}
#footer {
position:relative;
bottom:0;
z-index: 3;
}
A few basic things:
What is the purpose of the empty bg1 and wrapper divs?
You have css for an element with ID 'footer', but there is no such element in your html.
Wrapping an h2 tag in a p tag is semantically incorrect.
A quick clean-up gives us something like this:
<body>
<div id="full-screen-background-image"></div>
<div id="footer">
<h2>Framing your memories. Enter here. </h2>
</div>
</body>
Try adding a working jsfiddle so people can help you better. I can't access your local image, so I used a red background. See this fiddle for a basic idea of positioning one item on top of another: https://jsfiddle.net/cp35y75z/1/
If you use position: absolute instead of position: relative the element will not take up space in the DOM, meaning there will be no white space where the footer would have been originally.
To style the footer make sure you take away the # unless you have an ID on the element. The proper css should look like this:
footer {
position:relative;
bottom:0;
z-index: 3;
}
I know that we normally use margin:auto however I am using the code below.
HTML :
<article>
<header></header>
</article>
CSS:
article{
max-width: 500px;
margin: auto; /* goes in the middle - great */
}
header{
width: 130%;
margin-left: -30%;
}
Demo
At this point I am placing the article in the center. However, as the browser/window size gets smaller, I would like to center the article as if its width was as wide as the header. Basically, at some point (as you shrink the browser window) the header will be at the edge on the left, whilst not taking advantage of the blank space on the right.
I don't want to have an extra div, but if I did, I would wrap the article in a div and give it an auto margin.
screenshot http://i3.minus.com/i2yPFqNDgeBbS.png
Maybe I'm misunderstanding something, but don't you just want:
margin-left: 15%;
on the header?
This code does what is described, but if you want to keep the two edges aligned you would need to get into some javascript, I recommend jquery for this kind of thing.
<html>
<head>
<title></title>
<style>
html, body {
width: 100%;
text-align: center;
}
.header {
width: 960px;
margin-left: auto;
margin-right: auto;
position: relative;
left: -100px;
background-color: blue;
}
.article {
width: 75%;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="article">TODO write content</div>
</body>
</html>
I've decided to throw in the towel on this problem and need some help :). As per title trying to vertically align an image wrapped in an anchor element in the center of a floated fixed height div.
Done a lot of googling for solutions and the closet I can get is below when the div is not floated (however it needs to be). Any ideas would be greatfully appreciated!
.class_name {
/*float: left*/
width:153px;
height:153px;
margin:3px;
padding:4px;
border:1px solid #dedede;
text-align: center;
vertical-align: middle;
background-color: #000;
display: table-cell;
}
<div class="class_name">
<img src="image.jpg" alt="" />
</div>
Well, I bumped into the same issue last night (for a gallery-like type of thing), and managed to find a solution after stumbling onto this page. I'm happy to report this also seems to work for floated elements!
The trick is basically to give the outer element "display: table;", and the inner element (containing the img) "display: table-cell;".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<style type="text/css">
.class_name {
display: table;
float: left;
overflow: hidden;
width: 153px;
height: 153px;
}
.class_name a {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="class_name">
<img src="image.jpg" alt="" />
</div>
</body>
</html>
For IE8, you do need to be in standards mode. Some additional positioning is needed to get it to work in IE7:
<!--[if lte IE 7]><style type="text/css">
.class_name {
position: relative;
}
.class_name a {
position: absolute;
top: 50%;
}
.class_name img {
position: relative;
top: -50%;
width: 100%;
}
</style><![endif]-->
If the height is fixed and you know the size of the image, just position the image manually. Use position:absolute;top:25px; on the image or something like that, or add a margin to the image: margin:25px 0;.
There is a cross browser css solution for this available here: http://www.vdotmedia.com/blog/vertically-center-content-with-css/
I need to put a thin banner on the top of the page kinda like the orange notification one on this page. I need it to be absolutely positioned though, because when you click on it it needs to drop down (over the current page, not pushing the current page down). The banner needs to stretch the entire width of window but the content needs to be within 800px in the middle. I have it already made but I am having trouble with the CSS positioning of it.
Thanks!!
Below is an example. The main #banner element stretches the full screen and is pinned to the top of the viewport using position: absolute; top: 0; left: 0. The width: 100% makes it stretch the full width.
The #banner-content is where you put your content. This is centered and fixed at 800px in width. I've put a border around it so you can see.
Note: I've also 'reset' the margins and padding of all the elements to clear the default padding. You might want to use something like Eric Meyer's Reset CSS in your final application.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
div#banner {
position: absolute;
top: 0;
left: 0;
background-color: #DDEEEE;
width: 100%;
}
div#banner-content {
width: 800px;
margin: 0 auto;
padding: 10px;
border: 1px solid #000;
}
div#main-content {
padding-top: 70px;
}
</style>
</head>
<body>
<div id="banner">
<div id="banner-content">
This is your banner text, centered and fixed at 800px in width
</div>
</div>
<div id="main-content">
<p>Main page content goes here</p>
</div>
</body>
</html>
#banner {
position: absolute;
top: 0px;
left: 0px;
margin: 0 auto;
text-align: center;
}
#banner_contents {
width: 800px;
}
Should be as simple as making two divs...the main one wraps the content one and centers it.
I cannot get my site to be centered for the life of me with CSS. I have tried all the usual methods suggested around the web including:
body {
text-align: center;
}
#container {
width: 770px;
margin: 0 auto;
text-align: left;
}
Then using
<div id="container>
<!-- Centered Content Goes here-->
</div>
But it just wont go to the center. It stays at the left side of the page.
An example of the CSS for the element that I want to be centered is this:
#topHeader
{
background:url(images/top_header.jpg);
position:absolute;
width: 695px;
height: 242px;
top: 0px;
left: 0px;
}
So, my HTML would look like this:
<div id="container>
<div id="topHeader></div>
<!-- All other elements go here as well-->
</div>
But as I mentioned before, the element stays put.
Thanks!
Eric
Try with this
dead centre
The primary issue is the absolute positioning of your #topHeader element. Because you have it absolutely positioned with top: 0px; left: 0px;, that's exactly where it's going to be positioned - at the top left of the page.
Start off by removing the absolute positioning from the #topHeader element.
Try adding this to the top of your css file:
// Wipes out any preexisting padding and margin.
html, body {
padding: 0;
margin: 0;
}
Then add a position: relative; directive to the class you want centered. Actually, try adding it to the html, body one so that all your classes use relative position. It might be that you have position: absolute; set which then combines with the left: 0px; to force your header contain to ignore the margin: 0 auto; and stay on the left of the page.
You're placing the header absolutely so it's being offset from the containing block (i.e. body), not the parent element. What you want is Relative positioning.
absolute
The box's position (and possibly size) is specified with the 'top',
'right', 'bottom', and 'left'
properties. These properties specify
offsets with respect to the box's
containing block. Absolutely
positioned boxes are taken out of the
normal flow. This means they have no
impact on the layout of later
siblings. Also, though absolutely
positioned boxes have margins, they do
not collapse with any other margins.
- 9.3.1 Choosing a positioning scheme: 'position' property
Absolute:
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
#container {
color:blue;
border:1px solid blue;
width: 770px;
margin: 0 auto;
text-align: left;
}
#topHeader
{
color:red;
border:1px solid red;
position:absolute;
width: 695px;
height: 242px;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
outside
<div id="container">
inside
<div id="topHeader">deep inside</div>
<!-- All other elements go here as well-->
</div>
</body>
</html>
Relative:
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
#container {
color:blue;
border:1px solid blue;
width: 770px;
margin: 0 auto;
text-align: left;
}
#topHeader
{
color:red;
border:1px solid red;
position:relative;
width: 695px;
height: 242px;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
outside
<div id="container">
inside
<div id="topHeader">deep inside</div>
<!-- All other elements go here as well-->
</div>
</body>
</html>
One thing to check when trying out all of these methods of centering is to make sure that your doctype is correct for the method that is being used.
Hope this helps for you.
As far as I know it simply doesn't work. text-align centers text or inline content, not block elements.
Edit: On the other hand The Disintegrator's link makes sense. Unfortunately, only for fixed-sized blocks.