|
CSS - How To Create This..
hi, i would like to create a nav like in the picture
I have tried and nearly got there, but I cannot get the subnav to position correctly. If i position the subnav absolute but when you resize your browser the nav moves and if i position it relative (i dont even knowwhat its relative to) it freaks out I can post my css if you want it, but im just wanting to know how you would do it, I dont want code...just like 'i would do blah blah becuase bah and stuf' Similar TutorialsHi all, I've tried several methods of doing what I want, but so far nothing's working. At this test site, I would like to basically create a box for text in the area right of the vertical line. The text has to fit in the given width, but will have to expand downward if there's enough text. I've tried a great many things but seem to be stuck completely. I've basically removed everything I tried and if someone could take a look to point me in the right direction I'd appreciate it. Thanks, Chris Does anyone know how I can achieve this effect in CSS navigation?. The lighter blue is a hover state and I'm wondering how I can get it to work behind the previous nav button's arrow. Cheers! Hi there, I am trying to acheive an effect like the image below.. so when the link is hovered on, there is a light gray bg, but with a 1px space above and below the bg. This is my CSS I have, but it is displaying what looks like a 2px border because my link has a top and bottom gray border. Any ideas how I can acheive this effect? PHP Code: #categories_home a{ background-image: url('images/nav_arrow.gif'); background-repeat:no-repeat; background-position:left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #6dbd00; text-decoration: none; padding: 2px 2px 2px 25px; border-bottom: 1px solid #ececec; border-top: 1px solid #ececec; display:block; } #categories_home a:hover{ background-image: url('images/nav_arrow.gif'); background-repeat:no-repeat; background-position:left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #6dbd00; text-decoration: none; display:block; padding: 2px 2px 2px 25px; background-color: #f6f6f6; border-bottom: 1px solid #ffffff; border-top: 1px solid #ffffff; } Hay gys !..... I'm confusing of this, i want to give the anchor from css class, and give hyper link inside the anchor,so how can i achieve this ? pls help ! Thanks Hi, I'm developing a site that is growing daily and I need to create a menubar that I can update just once, and it works across multiple pages. What is the best way to do this? Any links to instructions or tutorials would be much appreciated as I'm a fairly basic designer. thanks, Jean I want to create a line break in my text, but the <BR> command's is too big. Is there a way in CSS to dictate how large of a break I want? However, I only want to apply it to certain parts of a the page, but not the whole thing. How can I do this? Hi Does anyone here written any article on creating tableless (web 2.0) interfaces with CSS only? I want to learn CSS so that I can get rid of tables and can design sites based on pure CSS and valid xhtml. any specific links on this topic are highly appreciated. thanks Hi all, Okay, I need to create a drop-down menu on a site that I'm trying to make table-less. So is it possible to create a drop down menu, (such as the dev shed search at the top of this page) within CSS or something other than tables? Cheers. I just got done with the second CSS tutorial for today. Please drop a comment telling me what you think. http://www.majd-gfx.com/tutorials.php?cmd=view&cat=css&id=16 Hi there, I have a table which I want to have a background color on hover. I have tried this: PHP Code: <table style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #888888" width="100%" border="0" cellspacing="0" cellpadding="8"> <tr style="color: #FF7D13;" bgcolor="#f1f1f1"> <td width="25%"><strong>Header 1</strong></td> <td width="25%"><strong>Header 2</strong></td> <td width="25%"><strong>Header 3</strong></td> <td width="25%"><strong>Header 4</strong></td> </tr> <div class="spec" onclick="location.href='#';"> <tr bgcolor="#f1f1f1"> <td width="25%"><strong>Designers</strong></td> <td width="25%">1</td> <td width="25%">2</td> <td width="25%">3</td> </tr> </div> </table> I have given a class to "spec" with a background color, but it doesn't work. Any ideas what is wrong? I am using "Stylin' With CSS" book to learn how to do my website layout and I need to put some images on my website. I just need something simple... I have an image showing what I am trying to do but I can't post the url.... I basically just need to create a horizontal row of n images, n being 1 to 5. The images are very close in dimensions, but not exactly the same. How can I do this... Thanks, CD Can anyone tell me how to create tableless designs in CSS with example and also what are advantages on tableless as compared to tables ? Thanks in advance I am trying to create a multi-column layout with DIVs but I am running into some problems. I have a wrapper div that goes around my columns with a background image that is tiled etc... for my multiple columns I use 3 more divs all floated to the left at the correct widths. The 3 columns all work great they look exactly how I want them to... the only problem is that even though they extend about half the page they do not cause their wrapper div to also extent to that length... is there a way to force this wrapper div to extend the same amount as the contained column divs without manually setting its height? I have searched on the internet and forums to solve this perdicament however every solution using images. Is it possible to round corners on <div> element for example with just code? (W3Compliant) From the looks it I think the answer is no. It cannont be done. I would just like clarification. If possible, how? Thanks - mike I'm currently working on a new blog and am trying to make this layout http://danbeckett.co.uk/newl.gif, but as this is my first real foray into CSS I'm not having much luck. I know that for the curves I'll need to use images, but it's getting them inline, and finding a way to make the (slightly) light(er) blue to stretch across as with the border. Here's what I have so far: http://danbeckett.co.uk/blog.htm and the CSS: http://danbeckett.co.uk/blog.css It looks better in FF than IE, in IE it really is a mess. If anyone can help me with this I would really appreciate it, Thanks - Dan. I am not sure if this is being done with CSS or JavaScript but I am hoping someone can post how to get effect found on the abduzeedo site. Each time you click a link it dips. Here is the address http://abduzeedo.com/ Thanks James I followed the online examples pretty closely but for some reason the effect isn't working how it is supposed to. You'll see what i mean he http://www.mr-danny.com/example.html could anybody tell me what i'm doing wrong? Code:
<html>
<head>
<style type="text/css">
ul#menu{
position:relative;
top:163px;
left:405px;
display: inline;
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu li{
display:inline;
list-style-type:none;
}
ul#menu li ul.submenu{
display:none;
}
ul#menu li ul.submenu li{
display:block;
}
ul#menu li:hover > ul.submenu{
display:block;
}
</style>
</head>
<body>
<ul id="menu">
<li class="home"><a href="" title="">Heading 1</a></li>
<li class="services"><a href="" title="">Heading 2</a>
<ul class="submenu">
<li><a href="" title="">sub 2-1</a></li>
<li><a href="" title="">sub 2-2</a></li>
</ul>
</li>
<li><a href="" title="">Heading 3</a></li>
<li><a href="" title="">Heading 4</a>
<ul class="submenu">
<li><a href="" title="">sub 4-1</a></li>
<li><a href="" title="">sub 4-2</a></li>
</ul>
</li>
<li><a href="" title="">Heading 5</a>
<ul class="submenu">
<li><a href="" title="">sub 5-1</a></li>
<li><a href="" title="">sub 5-2</a></li>
</ul>
</li>
</ul>
</body>
</html>
Hi, I'm looking for a tut on how to create tabs for content, not tabs for navigation/menu. Yes, kinda confusing, but here's an example of what I'm after: http://landflip.com/land.asp?listing_id=23028&hfeature=1 If you scroll down mid way, you will see a tabbed area where it provides the options to check out: Photos, Location, Aeriel and Street View. This is what I want to mimic (not the tabbed navigation up top in the menu bar). Can you recommend any tutorials that would teach me how to do this? Thanks. i know this is probably a really simple question but i cant think straight and why i cant work it out. when the person hovers over this image i want it to display a border or a certain colour. Code: #buildings
{
height:195px;
width:280px;
float:left;
margin-left:155px;
margin-top:45px;
}
thats my css i have for this image: Code: <div id="buildings"> <a href="Buildings.php"> <img src="Menu_Images/Buildings.png" width="280" height="195" alt="Buildings" /></a> </div> what would i need to do do ive tried a hover: but that didnt seem to work |
|||||||