CSS - Can't Get Links To Albums To Appear Underneath Images

Im 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 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

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'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.

Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them.


HTML
Code:

div id="bar-links">
<center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td>
</tr>
<tr>
<td background="images/barlist_02.gif" width="20"></td>
<td background="images/barlist_03.gif" width="456">&nbsp;</p>
<div id="bar-links">
<h4><a href="#" title="Riley's Pub">Riley's Pub</a>&nbsp;
<a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> &nbsp;
<a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> &nbsp;
<a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> &nbsp;
 </h4>
 </div>
</td>
<td background="images/barlist_04.gif" width="24"></td>
</tr>
<tr>
<td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td>
</tr>
</table>
</div>

CSS

Code:

#bar-links { 	text-indent:inherit; 	text-align:left; 	 }

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?)

Im just curious, what are the advantages of using css to import all your images (that arnt dynamic) as apposed to inserting them into your html using the <img> tag?

I want to have a hover effect on the links of my page. I'm using an attached stylesheet to define it. Here is the section defining the links:

Code:

a:link {
  color: red;
  text-decoration: none;
}
a:hover {
  color: blue;
  text-decoration: underline;
}
a:visited {
  color: red;
  text-decoration: none;
}
a:active {
  color: red;
  text-decoration: underline;
}

Normal links appear red and is not underlined. When the cursor hovers over a normal link, it appears blue and is underlined.

However, visited links do not 'behave' as normal links. They appear red and are not underlined. When hovered over, they do not change color or get underlined.

I want visited links to act the same. They only way I could get them to act the same was to do the following:

Code:

a.general:link {
  color: red;
  text-decoration: none;
}
a.general:visited {
  color: red;
}
a.general:hover {
  color: blue;
  text-decoration: underline;
}
a.general:active {
  color: red;
  text-decoration: underline;
}

This is the only rules IE will obey. But every link need to be defined as instances of class "general". Is there a better way of handling this?

question is about CSS and links.

I can get underline effect, background change, etc by using .a but i need to have more than one sort of link in my page, e.g. menu links cannot have the same effect as links in the main text.

How do i set up more than two link effects?

My first post Website:www.freewebs.com/weareamazing

I can't figure out how to move the links that are at the top of my page (Home, Graphics, Icons, Linking Back, Credits) to the side of my table. I also want to get rid of that line that is under the links. Thank you for your help!