I have a sign in button as shown below and when I try to click that the menu opens in which I am having an ASP.Net login control which is shown below my slider and not above it.So I would like to position it on top of my slider.And between my slider and sign in button I have menu bar.
So how do I do that?
I have followed this question on SO but did not succeed
This is my CSS:
#container {
width:780px;
margin:0 auto;
position: relative;
}
#topnavsignin {
padding:10px 0px 12px;
font-size:11px;
line-height:23px;
text-align:right;
margin-top:-60px;
margin-left:120px;
}
#topnavsignin a.signin {
background:#88bbd4;
padding:4px 6px 6px;
text-decoration:none;
font-weight:bold;
color:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
*background:transparent url('../images/signin-nav-bg-ie.png') no-repeat 0 0;
*padding:4px 12px 6px;
margin-left:420px;
}
#signin_menu {
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
display:none;
background-color:#ddeef6;
position:absolute;
width:350px;
z-index:100;
border:1px transparent;
text-align:left;
top: 24.5px;
right: 171px;
margin-top:-55px;
margin-right: 0px;
*margin-right: -1px;
color:#789;
font-size:11px;
padding: 5px;
}
This is how I'm showing it:
<div id="container">
<fieldset id="signin_menu">
//Asp.Net Login Control
</fieldset>
</div>
//Here goes my Navigation menu
This is my slider part
<div id="slider_wrap">
<div id="wowslider-container1">
</div>
</div>
To position one Div over the other you use the z-index on the css, together with position: absolute or relative or fixed
Some examples:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
http://www.w3schools.com/css/css_positioning.asp
On the container that you like to be front set a bigger z-index than the containers that you like to be on back.
Note that: the z-index works only for position: absolute, relative, or fixed, and the divs that you like to control have this attributes. The example that you mention try to fix order of divs with out having one of this attributes (or with out using the z-index), so in example can not use z-index and its a tricky how to place one in front of other with out the z-index enabled.
As I see you do not have set index in one of them.
On the container that you like to be front set a bigger z-index than the containers that you like to be on back.
Note that: the z-index works only with position: absolute/relative/fixed; on the same element. The example that you mention try to fix order of divs without having one of this properties (or without using z-index); it is not possible to place one element in front of other without defining z-index together with position.
Related
i'm having trouble giving a div a specific style. Let me explain a little bit better: I am using 2 divs for a webapp, the first one is a popup notification like the IOS one, and the other one is just an image to join the page where are few product updates (So every-time I update a product, it shows a popup notification near the corner of the image).
The problem I'm having is that i had to use padding-top: -28px to align the popup div #popupContact and the image div .imatges3 with the other images. When you click on the popup div (or in the image as well), it disappears, and the image div moves a bit upper, indeed stay at the same spot (because the div disappeared and keep applying the padding-top).
Is any way to give a different CSS value to a div, depending on if it has another div hiding or not? (Give another value depending on if the main div disappeared or not)
Thanks.
Example:
<div class="imatges3" id="pop"><div id="popupContact"><span class="boton">3</span></div>
<a href="actualizacion.html">
<img src="actprod.png" alt="Product Updates" border="0">
</a>
</div>
and css
.imatges3 {
float: left;
width: 100px;
margin-left: 4px;
margin-right: 2px;
margin-top: -28px;
}
#popupContact{
display:none;
height:20px;
width:20px;
z-index:200;
font-size:13px;
font-family: Arial, Helvetica, sans-serif;
font-size: 8px;
color: #ffffff;
padding: 0px 0px;
position: relative;
top:30px;
left:75px;
}
Lets Try With following css for both divs
position:absolute;
ATTENTION! PROBLEM SOLVED, SOLUTION PASTED BELOW INITIAL QUESTION
on the very top of web page Im working I have on to the left corner a flag (to change language) which I have in a div. On the right I have another div for another image (shop cart) but since I floated the right div, I still go to the right divs address when clicking on the left, like the right overrides the let one. Why? How can I solve this?
Also, I am doing this by using my html/css-files and editing them to fit wordpress for a customer.
CSS
#topmenu img {
margin-left: 25px;
float:left;
position:relative;
}
#cartmenu img {
position:relative;
margin-left: 542px;
}
header.php
<div id="container">
<div id="topmenu">
<img src="wp-content/themes/blank/images/icon_en_global.png" alt="English.png" width="42" height="30">
</div>
<div id="cartmenu">
<img src="wp-content/themes/blank/images/cart.png" alt="cart.png" height="" width="">
</div>
// SOLUTION Set width (in css) to both elements as well a float:left to both elements, then position with margins to get them where you want.
#topmenu img {
margin-left: 25px;
float:left;
position:relative;
width: 42px;
height:45;
margin-top:15px;
margin-bottom:-10px;
}
#cartmenu img {
position:relative;
margin-left: 520px;
float left;
width:350px;
height:40px;
margin-top:-20px;
}
Try to define a width for #topmenu img and giving the cartmenu a float:left; as well.
I am new to Css. I don't know whether this question had answer or not. Actually i have a page
<body>
<div id="confirm">
<img src="images/help.png" alt="Help Icon">
<div id="message">
Are you sure you want to deletesadcasdsaduasudashdhasdoiasnidosanidoasyduiasnduasnoidnasidonasiodashydioasndoiasndioasdhioasydoiasndioashydasiodsaoidasd
</div>
<button>Ok</button>
</div>
</body>
I am setting his style. Here is my css
#confirm {
background-color: #ddd;
display:block;
width:400px;
min-height:120px;
position:absolute;
border:1px solid #ccc;
border-radius: 15px;
-moz-border-radius: 15px; /*FireFox*/
-webkit-border-radius: 15px; /*Opera, safari*/
behavior: url(css/border-radius.htc); /*IE*/
}
#confirm img {
border:1px solid #ccc;
margin:20px 20px 0 20px;
float:left;
width:64px;
}
#message {
width: 280px;
border:1px solid #ccc;
float: left;
white-space: normal;
margin:20px 0 0 0;
overflow: hidden;
}
#confirm button {
position: relative;
width:68px;
margin:20px 180px 0 0;
float:right;
}
Right now when i run my code it produses output like this
Now i want that no matter how large the text of the "message div" is. The "confirm div" automatically adjust their size and as well as positions all the elements inside it.
Like right now i have set "confirm div" "min-height = 120". As you see the text is cropping. The text should not be cropped, The size of message div should increase automatically depending on the size of text. As message div size increase, the confirm div also increase in height, confirm div adjust the image and button in it. Finally all the elements should be inside the confirm Div. Or you can say that the message and image should always be remain in the center of the div.
How can i do it?
Thanks
Thanks
your message text has no white space and has a verrrry long word in it, you need to all that word to be broken to auto size the div
Add
word-wrap: break-word;
to the CSS for #messsage
JSFiddle
Update
Ok that proved difficult but does this work for you JSFiddle2, I've added another div and put the image in that one, its positioned absolute not float so can centre the image. Also had to add another div thats floated as the image was to force the message to be in the right place.
word-wrap: break-word; will serve the purpose.
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
DEMO
UPDATE
LIKE THIS middled from top?
So I have a 36px tall div with a form (#refine_search) in it. The form only contains a 35px tall button (#refine_search_button). All is well until I add a span after the form with a font-size over 17px. At that point the button will be displayed 2 or 3 pixels down from the top of the div.
You can see it in action here:
http://nolasatellitegovernment.tulane.edu/search.php
CSS:
#bluenav {
width:1124px;
height:36px;
position:relative;
background:url(/g/internal_page_blue_nav_bg.jpg) repeat-x #afdeff;
}
#refine_search {
display:inline;
padding:0 0 0 110px;
margin:0;
}
#refine_search_button {
width:92px;
height:35px;
background:url(/g/refine_search_button.jpg) no-repeat;
border:0;
padding:0;
margin:0;
}
#refine_search_button:hover {
background:url(/g/refine_search_button_over.jpg) no-repeat;
}
.big_heading {
font-size:22px;
font-weight:bold;
}
And the code looks like
<div id="bluenav"><form action="refine_search.php" id="refine_search"><input type="submit" id="refine_search_button" name="submit" value="" /></form><span style="padding:0 10px 0 20px; font-size:22px">
</div>
Does anyone know why 18px text would displace the preceding button in a 35px tall container?
Add vertical-align: top to #refine_search_button.
The default vertical-align value is baseline, and adding the span with different font-size adjusts where the baseline is.
If you would also like to vertically center the "Index Results" text, add line-height: 36px to the containing span.
#refine_search {
display:block;
float: left;
padding:0 0 0 110px;
margin:0;
}
Just add a line-height:36px to your #refine_search_button id and that should fix the problem.
Because you use display:inline they are dependent on each other, like images and text on the same line. Instead try using display:block; float:left; on both elements, then they will always float to the top :)
It might even work with display:inline-block;
IMO its better do generel better coding than using line-height etc to fix a dynamic problem (ie. you change font-size and so on)
I need to Positioning a DIV tag in top of the page like in the StackEchange top menu bar
i used to following code but there is the space
div.topbar{
width:100%;
background:#C0C0C0;
border:1px;
border-color:gray;
border-style:solid;
text-decoration:none;
font-family:Arial;
top:auto;
}
You also need to add:
position: absolute;
top: 0px;
position: absolute is not needed if is the first child of the containing element. Just do a
margin: 0
padding: 0
and you'll have the added benefit of the next element in the flow positioned correctly after and not under the top bar.
add
div.topbar{
position:absolute;
top:0
}
Did you try adding position:absolute; and top:0;?
You may need to clear:both; the next element, though.