Demo Page: http://apps.pc-tips.in/play/
In the above, the div containing "Ask any question & get" is centered, but the div containg the line "answers on" is not. why? Both have been styled similarly. given width, absolute position, margin auto.
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div {
margin:0 ;
padding:0 ;
}
#sidebar {
height: 600px;
width: 200px;
}
#topside {
height: 108px;
background-image: url(Untitled-3.jpg);
background-repeat: repeat-x;
text-align: center;
position: relative;
}
.down {
bottom: 3px;
position: absolute;
margin: auto;
width: 200px;
}
#bottomside {
background-image: url(Untitled-4.jpg);
height: 492px;
position: relative;
}
#wrapper #sidebar #topside {
color: #FFF;
font-size: 0.9em;
font-weight: bold;
}
.delhi {
font-size: 1.8em;
}
.top {
top: 3px;
position: absolute;
margin-left: auto;
margin-right: auto;
width: 100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<div id="topside"><br /> <span class="delhi">Delhi </span> Questions and answers.
<div class="down">
Ask any question & get
</div>
</div>
<div id="bottomside">
<div class="top"> answers on </div>
</div>
</div>
</div>
</body>
</html>
would anyone like to point out what I am missing here?
As kuroir's answer says, you can't center elements this way if you're also using absolute positioning.
Your "ask any question" div isn't being centered, you've given it the same width as its container.
The only reason the two look different is that there's a text-align: center on the #topside container, and not on the #bottomside container.
You can't center an element via margin:0 auto when it has position:absolute added to it. Remove the position:absolute from .top and it should work.
Not sure what you're trying to achieve, but this pretty much solves the problem you have. Remember you can use padding to "center" contents. That will save you from having to set the width explicitly.
You need to change your CSS, updating the '#bottomside' and '.top' styles like so:
#bottomside {
background-image: url(Untitled-4.jpg);
height: 492px;
position: relative;
text-align: center;
}
.top {
top: 3px;
position: absolute;
margin-left: auto;
margin-right: auto;
width: 100%;
}
The changes are self explanatory, if there is a confusion, let me know.
Related
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;
}
I am tryingg to design and simple css template for my dashboard. Like to have top section to display the logo and the title, left section for the menu, center to display info based on the menu, right to display some info, bottom to display some contact info. I like left/center/right side of the page to be vertically and horizontally scorllable. When scrolled, I need the header to be always showing on the browser.
can anybody help me with this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dashboard Layout</title>
<STYLE type="text/css">
#top {
height: 100px;
widht: auto;
border-bottom: 5px solid;
}
#left {
height: auto;
width: 350px;
border: 1px solid;
float: left;
overflow: scroll;
}
#content {
width: auto;
height: auto;
float: left;
overflow: scroll;
}
#right {
height: auto;
width: 350px;
float: right;
overflow: auto;
}
#bottom {
height: 50px;
width: auto;
}
</STYLE>
</head>
<body>
<div id="top">
<h3><b>Dashboard</b></h3>
</div>
<div id="middle">
<div id="left">
<h3><b>Menu</b></h3>
</div>
<div id="content">
<div id="div1" </div>
</div>
<div id="right">
<h3><b>Definitions</b></h3>
</div>
</div>
<div id="bottom">
<p>This dasboard prodides info about systems.</p>
</div>
</body>
</html>
To have a div that is always visible whether or not your scroll, use:
.visibleDiv
{
position: fixed;
}
Yes, as Karan said, you have to fix the position of your header (#top). A fixed element is positioned relative to the browser window.
#top {
position: fixed;
width: 100%
top: 0;
height: 100px;
border-bottom: 5px solid;
}
Then you would see your content div (#middle) starting to overlap with the header, so you should set aside a top margin.
#middle {
margin-top: 100px /* the same height as your header */
}
And because you are floating several divs, I suggest that you clearfix after them to adjust the height of the parent div.
There are many great tutorials for css menus and headers on the web, so Google them! :]
I have big problems with css buttons... My screen size is 1366x768 and their position is just fine until I zoom out in browser or show it to someone who have bigger screen.
Can anyone help me, please?
Site with problems: http://riotpointscodes.info/region.html
You are positioning your buttons absolutley to the document body:
Example left button:
position: absolute;
top: 475px;
width: 251px;
Place all buttons in a container positioned over your paper and set the position to relative or absolute and then play with the placement of the buttons.
When you use absolute positioning, you need an anchor point. The anchor point is the first element up the HTML tree that has position:relative defined. If no element is found, the BODY tag becomes the anchor point.
Since you have a wrapper with stuff inside it, this should be come your anchor point in order to keep everything inside even if the browser resizes, not the BODY.
Bored at work today and your graphics were pretty cool so....
Here you are my friend:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Riot Points Codes</title>
<link rel="SHORTCUT ICON" href="http://agessy.com/favicon.png" />
<style type="text/css">
body {
background: url("http://riotpointscodes.info/images/background.jpg") no-repeat scroll center top #070b14;
margin: 0;
padding: 0;
}
#wrapper {
width: 895px;
height: 493px;
position:relative;
top:180px;
margin:0 auto;
background: url('region_files/paper.jpg') no-repeat top center;
}
.choice {
background: url("region_files/map.png") no-repeat scroll 0 0 transparent;
height: 212px;
left: 50%;
margin-left: -259px;
position: absolute;
top: 43px;
width: 517px;
}
.logo {
left: 50%;
margin-left: -205px;
position: absolute;
top: -135px;
}
#lol-custom-buttons {
position: absolute;
bottom: 107px;
left: 0px;
width: 100%;
height: 90px;
text-align:center
}
.play-free-link {
height: 90px;
width: 251px;
background-repeat: none;
color: #ECC873;
display: inline-block;
}
.play-free-link.one {
background-image: url("http://riotpointscodes.info/images/1n.png");
}
.play-free-link.one:hover {
background-image: url("http://riotpointscodes.info/images/1h.png");
}
.play-free-link.two {
background-image: url("http://riotpointscodes.info/images/3n.png");
}
.play-free-link.two:hover {
background-image: url("http://riotpointscodes.info/images/3h.png");
}
.play-free-link.three {
background-image: url("http://riotpointscodes.info/images/2n.png");
}
.play-free-link.three:hover {
background-image: url("http://riotpointscodes.info/images/2h.png");
}
</style>
</head>
<body>
<div id="wrapper">
<div class="logo"><img src="region_files/logo.png"></div>
<div class="choice"></div>
<div id="lol-custom-buttons">
<a class="play-free-link one" href="http://riotpointscodes.info/"></a>
<a class="play-free-link two " href="http://riotpointscodes.info/"></a>
<a class="play-free-link three" href="http://riotpointscodes.info/"></a>
</div>
</div>
</body>
</html>
I have a container inside body, this container has left right margins and width. Now there is a div inside this that stretches throughout the page outside of container, but the tag is inside container. How do I achieve this.
Picture for illustration
Try absolute positioning:
#overflowing-bar {
left: 0;
position: absolute;
right: 0;
}
This will only work, of course, if the container is statically positioned.
Would something like this work?
HTML:
<div id="container">
<div id="overflower">
Overflow.
</div>
</div>
CSS:
#container {
background: #f0f0f0;
width: 300px;
margin: 0px auto;
height: 300px;
position: relative;
}
#overflower {
width: 500px;
position: absolute;
left: -30%;
top: 30%;
background: green;
text-align: center;
color: white;
}
http://jsfiddle.net/QwCq5/
Relative positioning would also work, though it means hardcoding the margin widths: http://jsfiddle.net/H7YJR/
If space at the left and at the right has fixed width, you can you negative margins for inner block:
.inner {margin: 0 -100px; position: relative; }
where 100px is width of space at the left and at the right of container.
position: relative usually used in conjunction with negative margins to make sure that shifted parts of block are visible.
You just give the inner container negative left and right margin. It must be equal to left and right margin of outer container. Try and play with this example (I gave outer div a heigth attribute, that you can see what's going on):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container {
width: 600px;
height: 400px;
margin-right: 50px;
margin-left: 50px;
background-color: #F60;
}
#inner_div {
background-color: #3399FF;
margin-left: -50px;
margin-right: -50px;
width: 700px;
position: relative;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="inner_div">test</div>
</div>
</body>
</html>
how to vertical centering in gwt by using vertical panel.. or pls sugest me is there any way for doing vertical cetering
If you want to directly use the VerticalPanel from code, you need to use the setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE)
You can also use the UiBinder approach
<g:VerticalPanel verticalAlignment='ALIGN_MIDDLE' horizontalAlignment='ALIGN_CENTER' width="100%" height="500px">
<g:cell></g:cell>
</g:VerticalPanel>
Take a look to DevGuideUiPanels for examples and documentation
I can give you an example on how we did it with css (to implement a popup like behaviour).
If you google for it there are dozens of solutions on how to achieve vertical centering. This example worked for us, so no guarantee if it's of any help for you.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0 auto;
}
.popup {
border-color:#ff4f00;
border-style:solid;
border-width:5px;
background-color: #ffffff;
text-align: left;
}
#wrapper, #container {
height: 150px;
width: 550px;
}
#wrapper {
bottom: 50%;
right: 50%;
position:
absolute;
}
#container {
left: 50%;
position: relative;
top: 50%;
}
</style>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>vertical centering</title>
</head>
<body>
<div style="width: 965px; height: 515px;"></div>
<div id="wrapper">
<div class="popup" id="container">
some content
</div>
</div>
</body>
</html>
EDIT: check also this question out.