I've been trying to make a joomla template with on the left and on the right a bar with fixed width. the main div should be responsive.
I managed to create the layout what i want here:
http://dennybeulen.nl/rena/nl/over-ons.html
The only thing what is not working is the menu on the left side. When i change the css the menu works, but the layout is not right anymore.
the menu is working if i make these changes (just removed the '-' in front of 130):
div.fluid{
margin-left: 130px;
}
hope somebody can give me some hints.
Looks like div.fluid is covering your left column.
Try making div.left absolutely positioned and setting your div.fluid to having no left margin:
div.fluid{
float: left;
width: 100%;
margin-right: -290px;
margin-left: 0px;
}
div.left{
position: absolute;
width: 130px;
min-height: 1px;
padding-top: 10px;
}
Keep in mind, div.left will no longer affect elements floating against it.
#gaynorvader is right in that your middle container lays on top of the menu. Instead of positioning it absolute, you could also just leave everything as is, and only add position:relative;z-index:1 for div.left.
Related
I am trying to edit a page to use the full width of the page. I am having problems setting out the div layout. There is a div there already
<div id="rightPanal" style="margin-top: 425px;">
but it has things too far to the right and it is a narrow column going down the middle of the page.
I deleting/editing/ a lot of div's already there and I end up with nothing and its all over the place on different broswers.
Can I go to the .css file and just write some css that would give me a box in the middle (where inside i can put in two columns) of the page that doesn't interfere with other div and layout on the screen - say start X and Y on the screen - 4 pictures of equal size and text underneath the four boxes - all square ?
Position: absolute
#rightPanal {
position: absolute;
top: 50%;
}
It sounds like you want absolute positioning:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
This code should get you close:
#rightPanal {
position: absolute;
top: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
box-sizing: border-box;
}
I'm trying to move a div from the top of the page down to the bottom, but it's not working.
Here's the div and its CSS:
<div class="slides">
<?php include 'slides.php'; ?>
</div>
.slides {
width: 990px;
height: 390px;
margin-bottom: 15px;
}
I've got the code (some of it, anyway) over on jfiddle:
http://jsfiddle.net/jerU7/
You can see the original page here:
http://www.autotrafficinfo.com/
I need to move the rotating banner at the top down to the bottom just above the footer. I moved the div (class="slides") down to the bottom of the html, but it's staying at the top. I realize you can make divs do things that aren't apparent, but I'm not sure how to make this one move down.
In the code on jfiddle, you can see that the text ("Real time traffic for 1.6 million...") is up at the top. The rotating images are, in fact, appearing towards the bottom (although all three are appearing there, instead of one at a time and rotating, because the java script isn't hooked up). The text and banners should all be at the bottom.
How do I scoot the div (class="slides") down so that it's just above the footer?
Your code needs a bit of restructuring.
Wrap all the divs from #greenSmall to #green in a new .content div.
Remove the css property float:left from #green
Move the .slides div to below the .content div and above the footer div.
css:
.slides{
top:97%; // Or designate the px location if you so desire
width: 990px;
height: 390px;
margin-bottom: 15px;
}
The code on the above answer is almost correct but it misses an element. For the 'top' and 'bottom' to work, the element must be positioned absolutely. So, the above code will become
.slides{
position: absolute;
top:97%; // Or designate the px location if you so desire
width: 990px;
height: 390px;
margin-bottom: 15px;
}
I have an absolute positioned logo on the bottom left of my website... BUT the problem is that ive positioned it to stick to the right of the page but it leaves a invisible barrier to the left of it that spreads across the page. So lets say a link is placed in alignment with that footer element, I won't be able to click it, the absolute positioned layer is spreading over it (even though nothings in it)
Heres my CSS for the logos position:
#basemenu {
margin-right: auto;
position: fixed;
bottom:0px;
width: 100%;
height: 40px;
text-align:right;
right:1%;
}
It sounds like you have an img inside of a <div id='basemenu'></div>. Is that right?
We could really use a block of HTML if you wouldn't mind posting it.
What I don't understand is why you can't target the logo itself with a bit of CSS like this:
#basemenu img {
height: 40px;
position: fixed;
bottom: 0px;
left: 0px;
}
Use the following block property display : none; to hide the block
I'm trying to set-up a shopping cart for my site, and I lack some knowledge in correctly using css to format the three columns when the browser is resized.
The css originally had the following:
.threeFrames .leftStyle {float: left; position: relative; width: 20%;}
.threeFrames .centerStyle {float: left; position: relative; max-width: 60%;}
.threeFrames .rightStyle {float: left; position: relative; width: 20%;}
But this didn't have the effect I wanted. I want to set the two end columns to fixed width 240px however, when I do this, when the browser is resized, it bumps the right hand column below the others, whereas I want just the middle column to shrink.
If you make .rightStyle {float:right;} and don't style the middle column at all, it will automatically wrap around when possible.
I created a wordpress blog (http://raptor.hk), but i am unable to set the right sidebar into correct position. i think i have missed something in CSS. the DIV is named "rightbar". I would like the DIV to be positioned right next to the content, within the white wrapper. Also, support of fluid layout (not moving on browser resize) is needed.
the problem is solved (see my answer), but anybody can give better solutions?
You can try putting the following styles for the div id "rightbar".
position: absolute;
top: 200px;
right: 300px;
That will put the "rightbar" div at the top of the page, just under the header and to the right.
I found a solution.
I put the DIV just inside the #main DIV, and set the following:
position: relative;
margin-top: 0px;
margin-right: 5px;
float: right;
width: 200px;
border: none;
border-collapse: collapse;