Here is a jsfiddle http://jsfiddle.net/Jw6kU/2/ of what i have right now. The thing i need to do is drop the white box and the text in that div tag ("left") down so it is center in the green bar at the top (67px tall). How can i easily do this? Sorry this is sloppy, the work was done fast.
This is a second post. The first one i messed up by pasting the wrong link. Sorry.
Using the margin-top css property would give the div space from the top of the page. You'd have to find the right amount of pixels and test it out fully but I think that will help.
I added this to the css of your fiddle and got the white div at the top in the center of the green div under it.
#left {
margin-top: 9px;
padding-top: 12px;
}
Related
I'm wondering why adding a "width" element to a box is destroying the effect of "float".
For example, when I have
.login form {
float: right;
background-color: green;
}
All elements shifts to the right and the background color only encircles the elements that are there (it does not create a green bar at the top of the screen as I want). I figured I could ameliorate this problem by setting a width,
… width: 800px; …..
but although I get a green by striping the top of the screen, all of my box elements seem to float to the left, so I have a green bar with login elements at the left and not the right.
Could someone please tell me how to take my .login box element, justify all of the five attributes that it has to the right (textfields, boxes, and a button), and still have a green bar at the top of the screen even where there is just blank space.
trying it with padding-left:(something px) ; instead of width: 800px; will probably fix this problem
What is likely causing this problem is that you're using the full capacity of the overlaying div, this makes it useless to float-right since there is nothing left to float away from
You can even put to the container: overflow:auto; or you can you the clearfix method found here.
I am experiencing difficulties when I am trying to Right align text links inside a div. I'm not sure what I am doing wrong. But this is the code for the div that is supposed be right aligned:
<div class="menu">
Home
Sign In
Join The Crowd!
</div>
And all the code is here: http://jsfiddle.net/GSfmf/1
I am wanting the buttons still vertically-centered in the header_div, but aligned to the right. And anything that I do doesn't move it.
Thanks, sorry for being foolish about the css.
Take out display table from your header div. Is there a reason your displaying it as a table?
Works fine when you take out display header
div.header_div{
background-color: #ffffff;
padding: 15px 50px 15px 50px;
}
in the css stylesheet just add the following code...think it wd work
.menu{ float:right;}
I have a couple of questions. Please see http://jsfiddle.net/POZR2/
Firstly if you scroll to the right you will see a white space, if you change the size of the screen/result box the size of the white space gets larger/smaller. The css for this is under the 'full' div and is:
#full{ background-color:#262626}
Secondly even though div id noint_box1 is centered in css it appears to be aligned left. This div is basically the 'body' of the html from the first heading to the last picture.
Thnkas
Give #full a min-width of 1061px - this for the first of the two issues.
For the other one... well, I'm not quite sure it's this that you want, but try applying the following rules to #noint_box1:
width: 958px;
margin: 18px auto;
your table is inheriting your centering, but not using it. add margins to it if you want it centered
table { margin: auto; }
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Space at the bottom and right side of my page
First off, I am sorry for posting this twice, my previous question earlier got good replies but they did not fix my problem.. so I am posting it again to hopefully get some more answers (I really need to fix this issue!)
Link for the actual page
Basically, at the bottom of my page between the offers/properties div and the footer there is a big space. I know why this is; I have used relative positioning and used top: -256px; to position the boxes where they are.
I have tried:
Aligning the 2 divs with absolute positioning - that does the trick of getting rid of the space at the bottom and I can get the boxes where I want them however if I was to scale down the browser, the boxes go out of position..(is there a way to get around that?)
Removing all positioning and floating them to the left/right - removes the space at the bottom/right but doesn't go into the position I would like them to
Sam on my previous question did this, it sorts of my problem just I can get them into position!
Adding overflow: hidden; to the container div.
I just don't know what to do so any help is really appreciated!
Thanks in advance!
EDIT:
Just saw that you got that answer already.. The next step is to put those boxes in a container.
<div id="offer_box_wrap"></div>
style
#offer_box_wrap {
width: 650px;
float: left;
margin-left: 5px;
}
you'll have to tweak it but it should work
end EDIT
You are relatively positioning your left boxes so...
i would suggest this
do not use <li> for boxes
use a div with a class that aligns them as you want.
<div class="offer_box"></div>
style it
.offer_box {
width: 208px;
height: 170px;
background: url(http://www.propertytest.uphero.com/images/offers_box.png) no-repeat;
float:left;
margin: (figure out the spacing you need for 3 per row)
}
put a clear div underneath the last one
<div style="clear: both"></div>
see it here http://jsfiddle.net/atTGa/2/
i want to get the bit at the top of some websites that really thin and right at the top. which looks like facebooks blue banner at the top of their website.
the code i have tried for the above is:
<div style="height:20px; background-color:grey; margin-top:-10px; "></div>
and it works apart from theres just a little bit of white space at the right and left sides of the grey.
Does anyone know what i am doing wrong?
It sounds like you haven't cleared the padding/margin on the body element. Give this a go:
html, body
{
padding: 0px;
margin: 0px;
width: 100%;
}
Also, give your div a width of 100%:
div
{
width: 100%;
}
I've probably gone a bit overboard with the CSS, but it will make sure everything works.
Additionally, make sure there is an HTML doctype defined - this can cause some other problems later one, such as :hover not working.
You need to use margin:0 on the html and body tags. This will allow your div to take up all the available horizontal space, and put it right at the top instead of having a small space.