|
CSS - Get Div Underneath?
Hi,
I want to get the footer (copyright notice) to appear below the all of the others. Basically I want it to appear below the left and right navbars, but in the centre of the page. The site is www.freesitetips.com. Can anyone help? Thanks! Similar TutorialsIm really new to this so please forgive the stupid questions. I have a logo div and I want to output a bit of PHP to the right of the logo. I put my code right after the header div and it places the output under the image, not to the right. Here is my code: Code: <h1 id="logo"><a href="<?php echo $this->getUrl('') ?>"></a></h1>
<img src="cart.jpg" alt="Cart" />
<?php $_cartQty = $this->getSummaryCount() ?>
<?php if ($_cartQty>0): ?>
<?php echo $this->__('There are <a href="%s"><strong>%s items</strong></a> in your cart.', $this->getUrl('checkout/cart'), $_cartQty) ?>
<?php echo $this->__('Cart Subtotal:') ?> <strong><?php echo Mage::helper('checkout')->formatPrice($this->getSubtotal()) ?></strong>
<?php if ($_subtotalInclTax = $this->getSubtotalInclTax()): ?>
<br />(<strong><?php echo Mage::helper('checkout')->formatPrice($_subtotalInclTax) ?></strong> <?php echo Mage::helper('tax')->getIncExcText(true) ?>)
<?php endif ?>
<?php endif; ?>
<?php if($_cartQty && $this->isPossibleOnepageCheckout()): ?>
<div class="actions">
<button class="form-button" type="button" onclick="setLocation('<?php echo $this->getCheckoutUrl() ?>')">
<span><?php echo $this->__('Checkout') ?></span>
</button>
</div>
<?php endif ?>
<?php $_items = $this->getRecentItems() ?>
<?php if(count($_items)): ?>
<?php echo $this->__('Recently added item(s)') ?>
<?php foreach($_items as $_item): ?>
<?php echo $this->getItemHtml($_item) ?>
<?php endforeach; ?>
<script type="text/javascript">decorateList('cart-sidebar', 'non-recursive')</script>
<?php else: ?>
<?php echo $this->__('You have no items in your shopping cart.') ?>
<?php endif ?>
Red is the code im trying to position. Attached is an image showing at the top what it is currently, and then at the bottom what im trying to achieve. Is the best way to do this to create a seperate DIV with float right or something along those lines? In css I can get 2 objects to display on right hand side at top of page easy enough. I don't want to use absolute positioning for an object's position. I have to position an object relative to another object eg this object should go underneath this object, can i do this ? I use this , and is this the best way you can do it? position:relative; right=-240;top=0 Hi, I'm new to this forum I hope someone can help. I'm using a jquery slidemenu to make menus pop down from a ul but I'm having trouble in that when the menu opens up, it opens behind a div below. Any tips much appreciated Thanks **sorted myself found a position relative on some bit being underlapped Help! Could someone please have a look at the website I'm making at brandnewcommunicatie.nl/mall? Problem is: I've created a simple table to display text and an image next to eachother. However, the textcolumn is under the image. I'm posting it here, because I'm fairly certain it's a CSS related problem. Probably some value in my CSS that isn't right. I just don't see it, after staring at the code for hours. I'd really appreciate it if someone can figure this one out Hi, I have the following code and under the main menu, it's a space as you can see under Contact for example for the entire menu. If I want to move down the menu with margin-top, the bottom will exceed the bottom of logo.png image. How do I insert an image here ? http :// imageshack.us/photo/my-images/600/44485569.jpg/ this is css code body { margin: 0; padding: 0; border: solid 1px black; } #nav { position: relative; margin: 0px auto; width: 960px; padding: 10px 0px 10px 0px; border: solid 1px red; } ul { list-style-type: none; margin: 0; padding: 0; font-family: Georgia; font-size: 21px; } ul a { text-decoration: none; padding-left: 25px; padding-right: 25px; display: block; color: #843bbb; } ul a:hover { color: #bd66ff; } ul a:visited { color: orange; } li { float: left; } How can I achieve same positioning with logo on left side, menu on right side, and I want somehing like an add in the middle using float and divs and not a table ? Thanks. I have pictures lined up horizontally in a content box, which is fine. The issue I am having is having links beneath each picture. The issue I have is that all of the links bunch up next to the last picture horizontally and don't appear on a separate line underneath the images. HTML Code: <div id="content"> <h2>Pictures from Events</h2> <ul class="hoverbox"> <li> <a href="#"><img src="images/TEST1.jpg" alt="description" /><img src="images/TEST1.jpg" alt="description" class="preview" /></a> </li> <li> <a href="#"><img src="images/TEST1.jpg" alt="description" /><img src="images/TEST1.jpg" alt="description" class="preview" /></a> </li> <li> <a href="#"><img src="images/TEST2.jpg" alt="description" /><img src="images/TEST2.jpg" alt="description" class="preview" /></a> </li> <li> <a href="#"><img src="images/TEST3.jpg" alt="description" /><img src="images/TEST3.jpg" alt="description" class="preview" /></a> </li> </li> </ul> <p id="links"><a href="#"> Epic Fridays| </a> <a href="#">Zen West </a> <a href="#">|Green Turtle </a> <a href="#">|Craig's </a> </div> CSS Code:
#content { float: right; width: 560px; height: 300px; color:#2C5923; background-image:url(images/Picscontent2.jpg); background-repeat: no-repeat; padding-top:20px; padding-left:20px;
hello, this will perhaps sound like a crazy thing to do, but i am trying to style my nested list(s) in order for the 'category' to appear below its children. so rather than having, for example sport football cricket formula one i have football cricket formula one sport the reason for trying this is that i am hoping to display my lists at various positions along a base line (over a bg image) and certain positions within the image require the category name to be under the 'children'. is it possible though? i tried making the inner list's position to be relative and adjusting the top position to -20 etc but of course this brings the children up rather than push the category down. here is an example of my nested list Code: <ul> <li>sport <ul class="up"> <li>football</li> <li>f1</li> </ul> </li> <li>music <ul class="up"> <li>stuff</li> <li>stuff2</li> </ul> </li> </ul> it probably isn't possible but i thought i would ask before giving up on the idea completely. thank you for your time i have a scrolling marquee. when the drop down menu extends, couple of the items gets hidden underneath the marquee container. when i define z-index:-1 then the marquee container disappears on the screen. does anyone have a suggestion for this? thanks. btw. it only happens in IE http://gcterminal.mallfinder.com/index.cfm?refresh=1&showdebug=1 I'm having problems with a javascript rotating picture overlapping my drop down menu! I've fiddled around the the z-index but cant seem to get the drop down menu to drop ABOVE the picture. Everything is contained inside my <div id="wrapper"> and my layout scheme works like: Banner = top image ("Why won't my drop menu's show up") the image extends all the way down to the menu, and then the navigation is just words that go on top of the menu texture i've made. The only gif im using in the #nav is for the small yellow triangle for the roll over effect on the menu's. I get the white and menu bar on the sides because i just made the background a 40px height by 10px width image the sample and had it repeat in x only and then set background colour to that grey. My images are all inside the .main_view div id. Any help is appreciated! you can see my problem he htmltest2.weebly.com What do i need to do to fix this?! Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) |
|||||||