I am working on a website that has been created with a shop CMS. On the start page there are two div boxes on the same level that appear in the following order:
DIV-box "container" -> contains the image of a gold bar
DIV-box "custom_text" -> contains text
Here comes a screenshot: http://de.tinypic.com/view.php?pic=11ratd5&s=5#.Utm1FhCIXrc
My goal: Having the text appear next to the gold bar by putting the "custom_text" box onto the image "container" box. How can I achieve that with CSS?
Just use this:
<div id="div1">
<div id="div2">
<p>2 divs</p>
</div>
</div>
You can put one div into another!
You can edit the width of the containing div and posting text to the side with another div.
I've solved it: I put the .imagemap inside the .container-div "absolute !important"...
Imagine the HTML was like this:
HTML
<div class="outer-box">
<div class="inner-box">Box 1</div>
<div class="inner-box">Box 2</div>
</div>
You can put two inner <div>s over each other by setting position: absolute;. An if you want to keep them in current position instead of sticking to top or other places, you should wrap it with an outer box and set position: relative; for the wrapper.
CSS
.outer-box {
position: relative;
}
.inner-box {
position: absolute;
}
If you don't do position: relative; for outer box, the default position of inner boxes (top:0; left:0;) will become actual position of their closest parent with relative on the page or just <body>.
Related
I have the following HTML structure:
<div>
<div class="expandable">
<div class="custom-select"><ul><li></li></ul></div>
</div>
</div>
<div>
<div class="expandable">
<div class="custom-select"><ul><li></li></ul></div>
</div>
</div>
<div>
<div class="choice-select">
<div class="custom-select"><ul><li></li></ul></div>
</div>
</div>
"expandable" divs are repeated.
"custom-select" divs become visible
on click.
"choice-select" is at the bottom of all expandable divs and
contains another select dropdown with a button
with the following styles:
.expandable {
position: relative;
z-index: 10;
}
.custom-select {
position: absolute;
z-index: 9999;
}
My problem is this:
The "custom-select" is used everywhere and has a very high z-index of 9999. Even if multiple of these are used in the same div, the clicked (expanded) one is still visible over the rest of the divs and selects as its in the same parent div.
I gave "expandable" div a z-index of 10 so that when the "custom-select" is clicked and it overlaps "choice-select", it is still visible and clickable.
However, since the "expandable" divs all have the same z-index and there can be N number of "expandable" divs, a "custom-select" when clicked and if it happens to expand into the sibling "expandable" div gets cut. Its hidden behind the content of the next "expandable" div.
What do I need to do to ensure that the "custom-select" is always visible? I also tried by giving "expandable" div an opacity of 0.99, but it didn't work. Any tips?
Somewhat indicative code: https://codepen.io/imgr8/pen/bzOrbY
I am going to answer my own question. I just added the z-index on the sibling parent only during hover. That solved it. Thank you for all your help!
I have a div on my homepage, not positioned, it holds the main image. On top of this main image I have a container which holds my search bar. I've positioned this container position:relative top:-500px; so that it appears over my main image.
I then have another 2 containers which come next, but if I do nothing positionally with them, they appear after a big vertical space, so I've had to position:relative and add a minus top to. I have to keep doing this top:-300px or whatever because if I don't a space appears beneath which I can't fill.
Now the next div down is the footer which I don't want to have to posiiton because it appears on every page. How can I get rid of the space between my featured properties and the footer?
Here's the code:
//no positioning
<div style="margin: 0 auto" class="slideshowWrap">
<div class="homeslideshow slide1">
</div>
<div class="homeslideshow slide2">
</div>
<div class="homeslideshow slide3">
</div>
</div>
//position:relative top:-500px
<div id="homecontainer">
</div>
//position:relative; top:-300px; margin-bottom:-100px;
<div id="homeBoxContainer">
</div>
<div style="clear:both"></div>
//position:relative; top:-300px;
<div id="homeFeaturedContainer">
</div>
You have a problem the way you designed your containers. When you moved everything up using position:relative and top:-300 it moves everything up, but the height from your #content is still saving the space and maintaining the height.
If you want your footer links up, add the following code
#footer {
top: -300px;
position: relative;
}
that doesn't solve your problem because you still have the big height created by your odd design. You need to go back to the drawing board and redesign your container. You don't need the position:relative and moving everything up.
I generally only set top and bottom values on absolutely-positioned elements. Try this instead:
#homeFeaturedContainer {
margin-top: -300px;
margin-bottom: -300px;
}
Okay, so this is going to be hard to explain, so please ask questions if I am not clear
In my html page, I have a main "container" div that has multiple divs within it, but each of the divs inside the container are placed into one of two columns (so if there is a div in the container, it is either in the left column or the right column)
<div id="container">
<div id="column1">
<div id="item1-1"></div>
<div id="item1-2"></div>
<div id="item1-3"></div>
</div column1>
<div id="column2">
<div id="item2-1"></div>
<div id="item2-2"></div>
<div id="item2-3"></div>
</div column2>
</div container>
[NOTE: I know the syntax is incorrect, I am just making it easier to read]
So, in other words, I want two columns of divs that can vary in size (so the page size can vary), and so that item1-2 appears below item1-1, etc. The problem here is I want the divs in the container to appear inside of it, so I cannot use absolute or relative positioning. Something is telling me I should be using a table, but I am not sure how to go about doing this.
So, my question is: using only html and css, is there any to do exactly what is above?
First: make </div column1> and </div column2> just say </div>
Second: CSS:
#container {
width: 100%;
}
#column1, #column2 {
float: left;
width: 50%;
}
To achieve the look you want you should use CSS float property. However, to avoid problems with parent container not displaying correctly, consider following one of the two possible solutions:
Adding a div after floating elements with
clear: both
or applying code below to your parent div
overflow: hidden
This is what I want my page to look like:
Mockup http://img64.imageshack.us/img64/5974/pagedh.jpg
I'm not quite there yet. Here's where I'm at:
http://labs.pieterdedecker.be/test/test.htm
I'm quite new to using <div>s (as opposed to <table>s) to create the layout of my pages. How do I get the job done?
You can fix the menu by just adding 2 CSS style rules:
.menu { overflow: hidden; }
.menu ul { margin: 0; }
The overflow will leave a taller menu because of the browser default <ul> margin, just clean this up with the second style, which will knock the margin out.
try including clear:both in the body div.
<div id="body" style="clear: both">
<p>This is my body</p>
</div>
good luck! ;-)
Simply add the below code:
<div style="clear:both; margin-left:20px;">
after the line:
<div id="body">
That is:
<div id="body">
<div style="clear:both;">
More info about the clear property.
Also, have a look at good tutorial:
Div based layout with CSS
the problem i'm seeing now is that your blue 'item' boxes don't look right. i think the reason for that is that the div containing the 'item' boxes should be contained inside the main 'body' box. it is in fact the very first thing inside the 'body' div.
to make this easier on yourself, you should create a div inside the 'body' div, with width: 100% and background: blue (or whatever color that is). then, inside that div you can create your list of items.
the obvious way to put the "items" inside the "item bar" would be to float:left all the items inside their own divs. you would then need to set a static height for the "item bar" itself (like height: 2em), because a div containing only floating elements has no height.
I am trying to push my sidebar to the right of my page. When I do this my division gets pushed to the bottom of the page. Why is this?
Here is my page:
link text
It is because You use something like
<div id="Main">
<div id="content"></div><div id="sidebar"></div>
</div>
note that Div is a Block element.
You have 2 option to correct this issue. use from an inline element like span (instead of content andsidebar ) or convert div to an in-line element with css like
#sidebar, #content
{
display: inline-block;
}