I have a problem with setting up my menu for a website. The whole website is centrated whith margin: auto. By some reason the menu does not centrate because it's a div that contain links, the buttons. Each button link has a background image. This is because the images for the buttons are 315px wide and include the overlay images. For example, when the user holds over this image the image moves 105px to the left and shows the mouseover option. (View code)
This is the .html: (don't mind the id names for the buttons, didn't feel like changing :D and yes I'm swedish)
<body>
<!--Banner-->
<img src="/header/picture.png" />
<img src="/header/banner.png" />
<!--Pre-loads the images for menu-->
<img src="/header/start.png" style="display: none;" />
<img src="/header/bestall.png" style="display: none;" />
<img src="/header/priser.png" style="display: none;" />
<img src="/header/omoss.png" style="display: none;" />
<img src="/header/support.png" style="display: none;" />
<img src="/header/filarkiv.png" style="display: none;" />
<!--Menu-->
<div id="menu">
<img src="/header/box.png" id="box" />
</div>
<div id="content">
<p>Hi!</p>
<p>This is one paragraph</p>
<p>And this is another.</p>
</div>
</body>
And this is how I have set up the buttons in the css for the menu:
/*Startknappen*/
#startknapp
{
position: absolute;
left: 0px;
width: 105px;
height: 35px;
text-decoration: none;
background-image:url(start.png);
}
#startknapp:hover
{
background-position: -105px 0;
}
#startknapp:active
{
text-decoration: none;
}
/*Priserknappen*/
#priserknapp
{
position: absolute;
left: 105px;
width: 105px;
height: 35px;
text-decoration: none;
background-image:url(priser.png);
}
#priserknapp:hover
{
background-position: -105px 0;
}
#priserknapp:active
{
text-decoration: none;
}
... and so on for the other buttons...
Here is some of the .css:
#html, body
{
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 800px;
height: 800px;
margin: auto;
}
#menu
{
height: 35px;
width: 800px;
}
#content
{
position: absolute;
width: 800px;
background-color: ;
}
The problem now is that, as written above, the menu won't centrate. However when I do position: absolute; for #menu it does centrate. Only problem is that content then overlaps the menu, and I don't want that. I want content to start 0px after the bottom of menu. Here are some images of how it looks:
Won't centrate:
http://imageshack.us/photo/my-images/15/leftra.png
Position: Absolute:
http://imageshack.us/photo/my-images/443/centerh.png
Hope someone can help me get this right. Thanks in advance :)
hasn't been closed, I don't know if you haven't closed the body tag either or just cut that off of your copy-pasting.
Also, the style for#menu should include "position: relative" if you are setting the menu items with position absolute, that way they will be positioned relative to the menu container and not the body of the page.
Also, I'm not sure what this code will do:
#html, body
{
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 800px;
height: 800px;
margin: auto;
}
You're trying to position it centrally with a width, but then saying that it should stretch to every corner with the portion that says "top: 0; right: 0 etc"
It would be much better to have a wrapper like such:
HTML:
<div id="wrapper">
All content in here
</div>
CSS:
#wrapper { margin: 0 auto; width: 800px; }
Edit: Also just noticed, nice to see someone else using Ubuntu ;)
Edit2: It would be much better if you positioned your nav items with floats instead of "position: absolute" for more information see here
For more information on positioning, which you might also want, see here
As Sean Dunwoody said, you need to add position: relative to div.menu. When using position: absolute, items are positioned to the last item to be given a position property. Since you haven't positioned any of your divs other than the menu items, they're moving up through the hierarchy of divs and positioning themselves in relation to the body tag. By adding position: relative to div.menu, you tell div.menu where it needs to be (i.e, relative to everything else), and then the buttons know where they need to be (positioned absolutely in regards to their parent div, div.menu)
Related
the top attribute appears not to be working on a html. I am trying to use the top attribute on image to move an image to the top and place above a text but the top attribute of a css never moves the image Here is snippet
<div class="stl_02">
<div class="stl_03">
<img src=""
alt=""style="top: 4.4538em;" class="stl_04">
</div>
<div class="stl_view">
<div class="stl_05 stl_06">
//other texts here
here are the css rules
.stl_02 {
height: 46em;
font-size: 1em;
margin: 0em;
line-height: 0.0em;
display: block;
border-style: none;
width: 51em;
}
.stl_03 {
position: relative;
}
.stl_04 {
width: 100%;
clip: rect(-0.041667em,51.04167em,66.04166em,-0.041667em);
position: absolute;
pointer-events: none;
}
Please how can push the image to the top using this attribute style="top: 4.4538em;" is a challenge
Your element does have the top attribute applied. This can be seen in the following:
.stl_02 {
height: 46em;
font-size: 1em;
margin: 0em;
line-height: 0.0em;
display: block;
border-style: none;
width: 51em;
}
.stl_03 {
position: relative;
}
.stl_04 {
width: 100%;
clip: rect(-0.041667em, 51.04167em, 66.04166em, -0.041667em);
position: absolute;
pointer-events: none;
}
<div class="stl_02">
<div class="stl_03">
<img src="http://placehold.it/100" alt="" style="top: 4.4538em;" class="stl_04">
</div>
<div class="stl_view">
<div class="stl_05 stl_06">
</div>
</div>
</div>
If you are not seeing this effect, it is possible you have a rule with higher specificity overriding it, or you have cached the style before you applied this rule.
It's also worth noting that top only works on a positioned element. You need to have position: relative, position: absolute or similar on .stl-04 in order to position it with top.
Alternatively, you may be looking for margin-top, which positions vertically based on the containing element.
As an aside, basing margins off of font sizes (with em units) is generally bad practice; you should really use fixed units instead (preferably not going to so many decimal places).
How can I keep my red box on top line when the center div has a very wide content?
When The centered div has much content, the red div goes to another line.
Do you know why this occurs?
Take a look at my code:
http://jsfiddle.net/5dC6T/3/
The issue is in the way that you've ordered your <div> elements. Try:
<div>
<div class="red-box"></div>
<img class="photo" alt="" />
<span>Name</span>
<span>Data</span>
<span>City</span>
</div>
CSS:
/* These two will stay anchored on the right and left */
.red-box { float: right; }
img.photo { float: left; }
I've made these modifications to your current code: http://jsfiddle.net/Wexcode/38qYS/
Use this CSS:
#QuadroEvento div.TopoEvento div.euvou{
height: 90px;
width: 90px;
background-color: red;
position: absolute;
right: 0px;
margin-right: 0px;
}
The key being: position: absolute;
You can also use position: fixed; etc., see here for more details: http://www.w3schools.com/cssref/pr_class_position.asp
I have the following standard markup:
<body>
<header><div class="wrapper">Header</div></header>
<div id="create">create something</div>
<div class="wrapper">Content</div>
<footer><div class="wrapper">footer</div></footer>
</body>
and style:
.wrapper {
width: 920px;
margin: 0 auto;
padding: 0 20px;
text-align: left;
}
The thing I am having difficulty with is positioning the "create something" button, I would like it positioned as shown below...
The important points to note are that the button extends to the right into infinity, and it always takes up a width of "4 squares" of the centralised area, no matter what the browser width.
Any advice would be appreciated, thanks.
One element for the button and another element for the line that goes into the infinity and beyond..
The infinity element is partially hidden under #wrap or #header element's background.
http://jsfiddle.net/lollero/62wcV/1
CSS:
#wrap {
width: 400px;
margin: 0px auto;
background: #ffffff;
position: relative;
z-index: 10;
height: 600px;
}
#button,
#button_line {
position: absolute;
top: 40px;
right: 0px;
height: 20px;
background: #3a99ff;
}
#button {
width: 100px;
}
#button_line {
left: 50%;
z-index: 5;
}
HTML:
<div id="button_line"></div>
<div id="wrap">
<div id="button"></div>
</div>
I'm not going to say this is the best way, but it works for me.
<div style = "background:red;position:relative;left:50%;right:0">
<div style = "background:green;position:relative;left:120px;right:0">
Your button here!
</div>
</div>
The first div just gives you a reference to the centre of the page. The second is the 'button' where the left is offset by however much you want.
When creating buttons with CSS, always calculate the width, height, paddings and margin. it helps to give accurate box size to fit any particular container. check out this post. http://www.phcityonweb.com/tutorial/css-programming-lessons/margin-padding Also check out their positioning tutorials.
I have a row of icons that need to be at the bottom of the page, they also need to be fixed. Simple, right? Not. When you position them fixed, the icons fall into one another so only one icon shows. Well there goes that, but there also goes the chance of placing them at the bottom of the page since I need
#icons {
position:fixed;
bottom:0;
}
I could always manually place them, but this means they cant be fixed like I need them too, and I would have to declare it for different browsers. Help?
Link to website: Roseannebarr.tumblr.com
Here is an example of my HTML
<div id="outer">
{block:Photo}
<img id="block" src="http://static.tumblr.com/ux4v5bf/vYSlebvt2/photo.png">
<div id="tooltip">
{LinkOpenTag}<img id="photo" src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Photo}
</div>
Fixed position is what it says, 'fixed', and you are using the same position for all of them.
The best way is not to use position:fixed in #outer, instead try with display:inline; and better yet, I see they are inside #holder, use fixed in #holder and modify #tooltip so it can be shown above because it is what is showing the content.
For example:
#holder {
bottom: 0px;
left: -382.5px;
margin: 0px auto 0px 50%;
margin-left: 50%;
position: fixed;
width: 765px;
}
#tooltip {
background: #6CB4E2;
border-top: 30px solid white;
display: none;
left: 50%;
margin-left: -382px;
padding: 10px;
position: absolute;
bottom: 51px;
width: 745px;
}
#outer {
background: #6CB4E2;
bottom: 0px;
display: inline;
float: left;
margin-top: -8px;
}
I would wrap your icons in a div like this:
<div id="myicons_container">
<img src="icon1.gif">
<img src="icon2.gif">
<img src="icon3.gif">
<img src="icon4.gif">
<img src="icon5.gif">
</div>
<style type="text/css" media="screen">
#myicons_container {
position: fixed;
bottom: 0;
}
</style>
Edit : Per your comment, I would suggest re-writing your code to collect the icons in a container element. But, you might get away with this (haven't tested in any browsers):
<style type="text/css" media="screen">
.block {
width: 50px;
height: 50px;
float: left;
position: fixed;
bottom: 0;
}
</style>
Note: you have to give floated items a width and height.
One other note, in your code, you will have multiple elements with the same ID attribute. This is a no-no. You'll need to change it to a class like I've done in the CSS above.
alt text http://img190.imageshack.us/img190/7514/unbenanntax.jpg
This is what I want to do. A Div with some text in it and on the right bottom corner a img. The hight of the div is stable at 24px but the length is not known and there could be more than one of this divs In a row.
There are a couple of techniques of doing this. The simplest:
<div class="outer">
<img src="....">
</div>
with
div.outer { position: relative; height: 24px; }
div.outer img { position: absolute; right: 0; bottom: 0; }
Now that takes it out of the normal flow, which is a problem is you want other content to wrap/float around it. In that case you really need to know the height of the image and then apply appropriate tricks depending on what you've got.
Start with Making the absolute, relative.
If the image is 10 pixels high, for example, you could try this:
div.outer { height: 24px; }
div.outer { float: right; margin-top: 14px; }
Of course 14px comes from 24px - 10px. I don't know if that will satisfy what you're trying to achieve however.
Background image is your solution.
<div class="blarg" style="background:url(image.gif) bottom right no-repeat">Content</div>
You may need to adjust paddings of the div, too, so the contents of the div doesn't overlap your picture, if this is needed.
If you want to float the text around the image, both of those answers are wrong. Both will make the text go right over the image. I have been looking for hours and no real answer appears to exist. This article more clearly explains why both of those answer will not work if your attempting wrapping the text.
<div class='main'>
<div>...</div>
<div>...</div>
<div class="img-div">
<img src="....">
</div>
</div>
div.main {
height: 1164px;
width: 900px;
}
div.img-div {
position: absolute;
top: 1084px;
left: 817px;
margin: .75rem;
}
Assuming dimensions of the image are 57*55
Only for positioning an image at the bottom right corner:
I have "Div" and image in the div and small image in the bottom right corner of the div.
Detailed:
https://jsfiddle.net/ez08vL7w/
<html>
<head>
</head>
<body>
<div style=" position:relative; display: inline-block">
<img style="width: 100px; height: 100px; position: absolute; z-index: 4; bottom: 50px; right: 30px; "
src="http://images.unsplash.com/photo-1529736576495-1ed4a29ca7e1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"/>
<a href ="" target="_blank">
<img src="https://media.gettyimages.com/photos/tiger-portrait-picture-id949472768?s=612x612"/> </a>
</div>
</body>
</html>
Simplified:
<div style=" position:relative; display: inline-block">
<img style="width: 100px; height: 100px; position: absolute; z-index: 4; bottom: 50px; right: 30px; "
src=""/>
<img src=""/>
</div>