Can anyone take a look at this and let me know what I'm doing wrong (probably something stupid)?
I would like the Text "test" to be centered.
http://fiddle.jshell.net/uteaH/3/
CSS:
.wrap {
max-width: 1139px;
margin-left: auto;
margin-right: auto; }
#screenPresentation {
border-top: 4px solid #d95936;
margin-top: 50px;
margin-bottom:10px;
background: #fff;
}
#screenPresentation h2 {
margin-top: -45px;
color: #000;
font-size: 2.4em;
font-weight: 500;
float:left;
}
.loginContainer-wrapper {
width: 99%;
height: 500px;
border: 2px solid #000;
margin:0 auto;
}
HTML:
<div class="wrap" id="screenPresentation">
<h2>Title</h2>
<div class="loginContainer-wrapper">
test
</div>
</div>
text-align:center; by any chance?
I'm going to be a mindreader here since you won't tell us exactly what needs to be centered
DEMO
For #screenPresentation h2
Remove
float:left;
Replace with
position: absolute;
width: 95%;
text-align: center;
Sorry - I updated my question. I need the text "test" centered inside the inner div.
Oh in that case
Remove width:95%;text-align:center from #screenPresentation h2
Add text-align:center to .loginContainer-wrapper
DEMO
To center the text you need two steps:
First reset margin and padding for your tags:
* {
margin:0;
padding:0;
}
Second add text-align:
.wrap {
text-align:center;
}
The demo http://fiddle.jshell.net/uteaH/9/
you can use
<center>
test
</center>
that will do it.
Related
I need two divs next to each other so I had to put them in a wrapper. I want the outer div's height to be set by using the taller of the two div's wrapped inside. The height does seem to portray that quality when I use height:auto; for the outer div. However, the shorter of the two div's does not fill the entire height and it is not the same height as the other column. Does anybody know any CSS tricks to get this to work?
This CSS is as follows:
html, body {
background-color: #888888;
color: #98012E;
font-family: arial;
font-size: 18;
}
h1 {
font-size: 48;
text-align: center;
}
h2 {
font-size: 36;
}
.wrapped {
width:95%;
border-style: solid;
border-width: 5px;
border-color: black;
overflow: hidden;
color:black;
margin:5px;
height: auto;
}
.post {
width: 50%;
float: left;
overflow:hidden;
}
.bully {
background-color: green;
width: 50%;
float:right;
overflow: hidden;
text-align: center;
}
The html is as follows:
![<html>
<head><link rel="stylesheet" type = "text/css" href = "style.css"></link></head>
<body>
<div class="wrapped">
<div class="post"> Q: WHAT'S GOING ON??? <br/> A: I HAVE NO IDEA!!! </div>
<div class="bully">55.55</div>
</div>
</body>
</html>]
Image
I have attached an image of one example of this. Because of the sensitive nature of the other examples, I can provide you with any others. Thanks in advance!
What you need is adding extra div to make it seems same height.
The HTML:
<div class="wrapped2">
<div class="wrapped1">
<div class="post">Q: WHAT'S GOING ON???
<br/>A: I HAVE NO IDEA!!!</div>
<div class="bully">55.55</div>
</div>
</div>
Add some css like this:
html, body {
background-color: #fff;
color: #98012E;
font-family: arial;
font-size: 18;
}
h1 {
font-size: 48;
text-align: center;
}
h2 {
font-size: 36;
}
.wrapped2{
float:left;
width:100%;
background:green;
position:relative;
right:40%;
overflow:hidden;
position:relative;
}
.wrapped1 {
float:left;
width:100%;
background:red;
position:relative;
right:30%;
}
.post {
height:auto;
float: left;
overflow:hidden;
background:red;
position:relative;
left:70%;
}
.bully {
position:relative;
left:70%;
}
The point is position:relative.
And taraa...something like this will approaching.
Hope it will work for you.
Basically I have two different headers (different colours) that I have made sit on top of each other how I want but I also have a logo (the smiley face) that is meant to sit next to the headers. And once its in it's place next to (horizontally in line with) the two headers, I want the whole package (the logo and the headers) to be horizontally aligned to the center of their div (.box).
This is a simplified version of my problem and I tried to include all relevant code.
HTML:
<div class="container">
<div class="box">
<h1 class="header1">Hello</h1>
<h1 class="header2">World</h1>
<img src="http://i303.photobucket.com/albums/nn157/sal-ad_daze/smiley-face.png"></img>
</div>
</div>
CSS:
.container {
background-color:#dfdfdf;
border: 2px solid;
width: 800px;
margin: 0px auto;
}
.box {
width: 50%;
height:10%;
margin: 0 auto;
background-color: #5f5f5f;
}
h1 {
font-family:Arial;
line-height:30px;
padding:0;
margin:0;
}
.header1 {
color: red;
padding-top:15px;
}
.header2 {
color: blue;
}
img {
width: 10%;
}
JSFiddle: http://jsfiddle.net/9yWFf/
Add or change whatever you want in the Fiddle that will accomplish this.
Demo
Wrap your header1 and header 2 in a div and give float:left like this :
<div class="Left">
<h1 class="header1">Hello</h1>
<h1 class="header2">World</h1>
</div>
This is what you are expecting:
CSS:
.container {
background-color:#dfdfdf;border: 2px solid;
width: 100%;
margin: 0px auto;
}
.box {
width: 50%;height:10%;
margin: 0 auto;
background-color: #5f5f5f;
text-align: center;
}
h1 {font-family:Arial;line-height:30px;padding:0;margin:0; display:inline-block;}
.header1 {color: red;padding-top:15px;}.header2 {color: blue;display:inline-block;}
img {
width: 10%;
display:inline-block;
}
Fiddle Demo
I am trying to do a vertical align for my texts. I also want to make sure the green background div need to cover from top to bottom inside the red color div. Currently the green color div only covers 90% of the red oolor div. I am not sure what happened in my case. Can anyone explain and help me out?
html
<div id='wrapper'>
<div class='head'></div>
<h2 class='title'>Warm-Up</h2>
</div>
css
.title{
display: inline;
padding-left: 15px;
vertical-align: middle;
margin: 0;
}
.head{
width: 30px;
height: 50px;
display: inline-block;
background-color: #A9D075;
}
#wrapper{
width:200px;
background-color: red;
}
http://jsfiddle.net/rmS2f/3/
Thanks.
Demo http://jsfiddle.net/rmS2f/6/
Your html structure will work but you need to change the styles:
.title {
display: inline-block;
padding-left: 45px;
vertical-align: middle;
margin: 0;
line-height:50px;
}
.head {
position:absolute;
left:0;
width: 30px;
height: 100%;
display: inline-block;
background-color: #A9D075;
}
#wrapper {
position:relative;
width:200px;
height:50px;
background-color: red;
}
Need help to fix the footer. One of the boxes fals out of the footer. All 3 should be in a line, next to each together. The Css is uploaded and html showed. However i've tried a lot of stuff but seems nothing to be working. however the right box always out of the footer, i cloudn't figure out the problem
so please it would be great to get some help and understand exactly where i did go wrong so i can learn it
thank you :D
Css and html
<%-- Footer --%>
<div id="footer">
<div id="footer_placement">
<div id="left">
<p></p>
</div>
<div id="middel">
<p></p>
</div>
<div id="right">
</div>
</div>
</div>
<%-- Footer --%>
#footer {
bottom: 0;
width: 100%;
display: block;
background-color: #fff;
max-height: 50px;
}
#footer_placement {
max-width: 1024px;
margin: 0 auto;
display: block;
max-height:50px;
}
#right {
float: right;
height: 50px;
width: 298px;
background-color:black;
}
#right img {
height: 50px;
width: 50px;
}
#middel {
height: 50px;
margin: 0 auto;
width: 300px;
background-color:black;
}
#middel p {
text-align: center;
color: #321a51;
font-size: 12px;
font-family: muli;
}
#left {
width: 298px;
height: 50px;
float:left;
background-color:black;
}
#left p {
text-align: center;
color: #321a51;
font-size: 12px;
font-family: muli;
}
use display:inline-block; for this ids: middle - left - right
Fiddle
Your problem is the width of the left right and middle divs .
They don't really add up .. try to change the width .. make it smaller
jsFIDDLE example
I am not that bad at this, but somehow i am not able to center the contents of the page.
Also, the logo and tbar-right divs are not aligning properly (I'd like them to be arranged in a single line).
This is my markup:
<body>
<div class = "container">
<div id="topbar" >
<div class="logo">
<img src="images/rg-logo.jpg"/>
</div>
<div class="tbar-right">
<div id="User"><!--the script will feed this div--></div>
<!--Dummy Text-->Jasdeep, you have 24 routemiles |
My Profile |
Logout
</div>
</div>
</div>
</body>
...and these are the styles:
* {
margin:0;
padding:0;
}
body{
-x-system-font:none;
background:#FFF;
border:0 none;
color:#555F6A;
font-family:Verdana,arial,helvetica,sans-serif;
font-size:0.7125em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.5em;
margin:0;
padding:0;
text-align:center;
}
.container {
text-align: center;
}
#topbar {
background-color: #df3e36;
height: 32px;
width: 1004px;
}
.logo {
padding-left: 20px;
padding-top: 4px;
width: 15%;
height:27px;
}
.tbar-right {
text-align: right;
padding-right: 10px;
color: #FFF;
padding-top: 7px;
width: 85%;
}
.tbar-right a{
color: #FFF;
}
Please, help!
.container{margin:0 auto;}
As long as you have defined an explicit width. You should also probably replace
<div class = "container">
with
<div class="container">
Should center container. Make sure you don't float it.
.container{
width: /* must specify a width */
margin-left:auto;
margin-right:auto;
}
This should fix the alignment
.logo{
float:left;
padding-left: 20px;
padding-top: 4px;
width: 15%;
height:27px;
}
.tbar-right{
float: right;
padding-right: 10px;
color: #FFF;
padding-top: 7px;
width: 85%;
}
And you may need to rearrange the HTML a bit by putting the .tbar-right before the .logo
Try this:
#topbar { margin: 0 auto;}
The logo isn't aligning with the other stuff because it has a different padding-left. Change to
.logo {
padding-left: 0px; //or don't even list a padding-left,
padding-top: 4px;
width: 15%;
height:27px;
}
OH if you wanted it on the same line horizontally float them both to the left or right, and make sure there's enough space. ;D