I have trouble with my html/css code. I'm making a portfolio website and I have a horizontal navigation bar at the top, with .png images as navigation buttons and a mouse-on/mouse-over effect (the letters are supposed to turn grey with the mouse on it).
I had quite some trouble aligning the buttons horizontally but now they're placed where they're supposed to be, the only thing is suddenly they don't work as links anymore and the mouse-on/mouse-over effect is gone.
This is my code:
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<html>
<head>
<title>Menu</title>
<style type="text/css">
body
{background-image:url('menubg.png');}
{background-color:#FFFFFF;}
#navlist{margin:0;position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:relative;top:0;}
#navlist li, #navlist a{height:64px;display:inline-block;}
#about{left:0px;width:145px;}
#about{background:url('about1.png')}
#about a:hover{background: url('about2.png')}
#amfi{left:0px;width:168px;}
#amfi{background:url('amfi1.png')}
#amfi a:hover{background: url('amfi2.png')}
#personal{left:0px;width:202px;}
#personal{background:url('personal1.png')}
#personal a:hover{background: url('personal2.png')}
#inspiration{left:0px;width:202px;}
#inspiration{background:url('inspiration1.png')}
#inspiration a:hover{background: url('inspiration2.png')}
#cv{left:0px;width:65px;}
#cv{background:url('cv1.png')}
#cv a:hover{background: url('cv2.png')}
#contact{left:0px;width:128px;}
#contact{background:url('contact1.png')}
#contact a:hover{background: url('contact2.png')}
</style>
</head>
<body>
<ul id="navlist">
<li id="about"></li>
<li id="amfi"></li>
<li id="personal"></li>
<li id="inspiration"></li>
<li id="cv"></li>
<li id="contact"></li>
</ul>
</body>
</html>
and this is my website is here, where you can see my problem.
I would be really thankful if you can help me out!
I think problem here is you just place an anchor tag but in browser it is not added on particular action I mean you have given background image on <a> but there is no content present inside tag, keep in mind whenever you place hyperlink it should on some text or img
So instead of using empty tags use an image or text inside it and use javascript or jquery to change img src i.e
<img src="background/image.png">
your <a>s have no widthandheight the moment you will declare those in some way everything is going to be ok
i suggest to give property of widthandheight to <a> element instead of <li>
for example #about a{width:145px;height:64px} instead #about{width:145px;height:64px}
Try like this
#about{left:0px;width:145px;}
#about{background:url('about1.png')}
#about:hover{background: url('about2.png')}
Or like this
#about a{left:0px;width:145px;}
#about a{background:url('about1.png')}
#about a:hover{background: url('about2.png')}
Add this to your stylesheet and your issue will be solved.
#navlist li a {
display: list-item;
}
Hope this helps.
Related
I am new to CSS so please don't be to harsh on me. I am trying to place the yellow background DIV right below the "Header" DIV, but for some reason, it seems to place a padding before and after and I don't really understand why. If I remove the list, than the problem disappears.
This is the HTML code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS</title>
<link rel = "stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div id="headerDiv">
<p>Header</p>
</div>
<div id="listDiv">
<ul>
<li>Menu item 1</li>
<li>Menu item 1</li>
<li>Menu item 1</li>
<li>Menu item 1</li>
</ul>
</div>
<div id="mainviewDiv">
Main View
</div>
<div id="footerDiv">
Footer
</div>
</body>
And this is the CSS:
#charset "utf-8";
/* CSS Document */
div#headerDiv { background-color:#F00;
height:100px;
position:relative;
}
div#listDiv {background-color:#FF0;
}
div#listDiv ul {list-style-type:none;}
div#listDiv li { display:inline;}
div#mainviewDiv {background-color:#060;}
div#footerDiv {background-color:#999;}
I don't know if you have tried this, but adding this to the top of your CSS file might help you out:
*{
margin:0;
padding:0;
}
But when you publish your website use Eric Myers CSS reset
And like Maxime Morin said, you might want to check out http://nicolasgallagher.com/about-normalize-css/
set your #listDiv and #headerDiv to have a margin:0px;
Renders fine in Chrome telling me you're probably using IE. You can solve issues like this by using a CSS reset http://meyerweb.com/eric/tools/css/reset/ which sets all your CSS elements back to 0 so all browsers start at the same point, overriding some of their built in default CSS.
The thing to keep in mind about resets is you know have to style each element you use. For example lists will have no padding, no default list style etc. You can of course remove some items from the reset but that sort of defeats the purpose of them.
The problem is probably the top margin of the ul element, due to collapsing margins.
Also make sure the divs don't have a margin and padding (which they probably have not, because divs don't have margins by default.
People often use CSS reset like this to remove all those margins and paddings on all elements. After that, you can add specific styling where you need it. You should consider using that once you start the 'real' styling.
Some tags has default styles - even if you don't really declare them.
You can override this rules for example by adding simple:
margin:0;
padding:0;
into your CSS declarations.
Your Unordered list is creating left padding of 40. Replace your code with this:
div#listDiv ul {list-style-type:none;
padding:0;
}
You will come across a lot of default styles troubles if you're just starting out. Keep at it and you will learn. We all had to start somewhere!
I need to vertically align the Facebook and Twitter share buttons. This is how I render them:
<a name="fb_share" type="button" share_url="http://www.livkontrol.com/blog?id=1"></a>
Tweet
Even though they are almost the same size, one appears much on higher than the other. They also seem to ignore any kind of CSS rule I apply to the link element. Does anyone knows how to override the CSS of these elements and have them vertically aligned side-by-side?
I've had the same issue. Facebook uses an inline tag that sets the text on the bottom, causing it to render below twitter and facebook. My solution is to override it by placing CSS after the actual button call. Works nicely:
<style media="screen" type="text/css">
.fb_iframe_widget span
{
vertical-align: baseline !important;
}
</style>
The call modifies facebook's own CSS style.
the answer provided by Marie doesn't seem to work anymore.
For me this does the trick:
html:
<ul class="social">
<li> put button markup here </li>
<li> and next button </li>
...
</ul>
css:
.social li{
display:inline;
}
.fb-share-button{
position:relative;
top:-7px;
}
it might be neccesary to adjust the value for top, depending on the button style/size, future changes.
ps: I know this is an old question, but google likes it..
The correct answer is here
style="height:20px; vertical-align: top;"
I got it to align by styling the first Facebook span with !important to override its inline style:
.fb-like > span {
vertical-align: baseline !important;
}
Tho I'm not sure if this will work on all browsers.
This worked for me, added to my own css.
.fb_iframe_widget span{vertical-align:inherit !important;}
I'm developing on a Mac, so I'm relying on emulators for IE-testing. According to netrenderer (http://ipinfo.info/netrenderer/), my layout (which naturally works beautifully on my installed versions of Safari & Firefox) works in IE6 and below, but not at all in IE7 and above.
Note that I haven't tested this with an actual IE install- only with netrenderer.
It is showing that on IE6 and below, despite there being some minor font-sizing issues, it mostly works: the "menu" sits on the left and the "content" sits on the right, and a background image shows up for "menu". In IE 8&9 the divs sit on top of each other, and in IE7 the "menu" div is shoved over to the far right. In 7, 8 and 9 no background image shows up for "menu".
I've created a test page with simplified content and the relevant styles built into the header here: http://www.steph-morris.com/test.html
I've run it through the W3C validator and it validated fine. I've tried dicking around with position: variations on the various containers, as suggested by many a StackOverflow IE positioning solution, to no avail. I am hoping that some battle-hardened veteran of the browser compatibility wars will be able to take one look at it and let me know why the layout concept I've chosen won't work with IE, and point me in the direction of an acceptable hack or substitute.
This was a while ago now, but i noticed your link was still active (and still showing the broken layout)...
I had a quick look at this and I think the problem lies within your css. I didnt have time to have a thorough look but i did manage to quickly draw up a basic version of your site by changing some lines which worked in IE9/8/7 and FF.
Hope this helps :)
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Steph Morris | TEST</title>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Puritan">
<style>
body {background:#ffcc33 url('http://www.steph-morris.com/images/other_bg.jpg'); font:13px/1.5 Helvetica}
#menu {width:170px; float:left; margin-right:1em}
#logo{}
#logo h1{}
#logo h1 a{color:#000; text-decoration:none; font-family:'Gill Sans','Puritan',Verdana,Arial,'Liberation Sans',FreeSans,sans-serif}
#middle_left ul {
font-family: 'Gill Sans','Puritan',Verdana,Arial,'Liberation Sans',FreeSans,sans-serif;
font-size: 13px;
list-style:none;
padding:0;
color:#000}
#other {float:left; width:600px;}
#other h1 {
font-family: 'Gill Sans','Puritan',Verdana,Arial,'Liberation Sans',FreeSans,sans-serif;
font-size: 35px;
padding-right: 15px;
padding-top: 15px;
margin:0;
}
#other_text {padding:25px;}
#other_content {width:600px; height:600px; background: url("http://www.steph-morris.com/images/other_square.jpg") no-repeat scroll center top transparent}
</style>
</head>
<body>
<div id="container_other">
<div id="menu">
<div id="menu_left">
<div id="top_left">
<div id="logo"><h1>Steph Morris</h1></div>
</div>
<div id="middle_left">
<ul>
<li><div>The Start</div></li>
<li><div>About</div></li>
<li><div>The Novel</div></li>
<li><div>Translation / Übersetzung</div></li>
<li class="current"><div>Around</div></li>
</ul>
</div>
<div id="bottom_left">
<p class="contact">Contact:<br>steph#<br>stephmorris.com</p>
</div>
</div>
</div>
<div id="other" class="">
<h1 class="veolay">Other Works</h1>
<div id="other_content">
<div id="other_text" class="veolay"><p>Due to absolute positioning, we need to define the height of the slideshow DIV. Also, notice that we defined three different z-indexes—we will manipulate these soon using jQuery.</p>
<p>For the slideshow animation we are going to switch between each photo at a set rate. So let’s start by writing a function that brings in a new photo on top of the last active image:</p>
</div>
</div>
</div>
</div>
</body>
</html>
Hi,
Attached screenchot is mockup of our application where in their are -n- number of widgets which are freely movable all through the screen. Everything else works fine except minimize widget functionality. PFA screen shot for the actual problem which comes up after clicking settings button (start of arrow in screen shot). The problem that we are facing is with the positioning of minimize block. We need to achieve it just below the setting button, but it is coming out of widget area.
Please find below code snippet and detail for the same.
The Minimize functionality is being formatted using the JQUERY file with forming the HTML using UL-LI
The CSS for the UL is done using below code snippet.
ul. editModule
{
Display:none;
z-index:200;
position:absolute;
left:177px;
top:3px;
padding-top:2px;
clear:left;
}
The minimize box in the screen shot is being made using below code snippet:-
<ul class=”editModule”><li class=”editColor”><ul class=”moduleColor”><li class=”module-colorWheel”></li><li class=”moduleChoice-blue” title=”module-blue”></li><li class=”moduleChoice-green” title=”module-green” ></li><li class=”moduleChoice-red” title=”module-red” ></li><li class=”moduleChoice-yellow” title=”module-yellow” ></li></ul></li>
<li class=”applyAll”><a href=”#” class=”closeModule”>Close Widget</a></li>
<li class=”minimize”><a href=”#” class=”minimizeModule”>Minimize Widget</a></li>
</ul></li></ul>
When I click on the settings button(start of arrow) it opens the minimize functional box for the widget in a wrong location. Ideally the position should be just below the Settings icon in the hearder i.e. Top right corner.
Any sort of help regarding this will be great. if any further input is required do post comments.
So the problem is that the pop-out div is showing up in the wrong location?
Please try to give the parent container of the pop-out element a CSS style of position:relative.
position:absolute works on the whole screen, unless the parent container of the absolute positioned element also has positioning set.
Erik
EDIT: I have made you some HTMl where the editModule is placed absolute relative to the titlebar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<style>
ul li {text-decoration:none; float:left;}
.titlebar {
background-color:green;
height:20px;
position:relative;
}
.editModule
{
position: absolute;
right: 0px;
top: 20px;
border:1px solid red;
float:right;
padding-top:2px;
}
</style>
</head>
<body>
<div class="titlebar">
<ul class="editModule">
<li class="editColor">
<ul class="moduleColor">
<li class="module-colorWheel">CW</li>
<li class="moduleChoice-blue" title="module-blue">BLUE</li>
<li class="moduleChoice-green" title="module-green" >GREEN</li>
<li class="moduleChoice-red" title="module-red" >RED</li>
<li class="moduleChoice-yellow" title="module-yellow" >YEL</li>
</ul>
</li>
<li class="applyAll">Close Widget</li>
<li class="minimize">Minimize Widget</li>
</ul>
</div>
<!-- </li></ul> -->
</body>
</html>
Try removing the clear: left; command. Clear together with position: absolute doesn't really make sense.
Let say I've this code :
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Layers Opacity</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="robots" content="index,follow" />
<style type="text/css">
div#container
{
background-color: black;
width: 200px;
height: 400px;
padding-top: 50px;
opacity: 0.5;
}
ul#menu
{
background-color: red;
width: 150px;
margin: 0 auto;
opacity: 1;
}
</style>
</head>
<body>
<div id="container">
<ul id="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</div>
</body>
</html>
I'd like to have my "#menu" in full color, red.
I tried to remove the inheritance by setting opacity to 1, but it doesn't work.
Did i make something wrong ? Or Is it simply not possible by this way ?
I could probably do a layer, outside my menu, and position it in background with z-index, but I'm looking a way in pure css, without to modify my xhtml.
Thanks
Since you are only trying to change the background of the element, you can use an rgba colour (CSS 3) in supporting browsers. Most browsers which don't support it can handle a translucent PNG.
See (blatant self-promotion) CSS 3: RGBA today for a fuller explanation and some sample code.
Nope. Putting the menu outside the container would be the normal fix; if you can't change the markup another approach is to avoid opacity entirely and use a semi-transparent PNG as the container background instead (with suitable AlphaImageLoader fix for IE6 if necessary).
From the specification:
If the object is a container element,
then the effect is as if the contents
of the container element were blended
against the current background using a
mask where the value of each pixel of
the mask is .
Since your menu is contents of the container, it will also have the containers opacity applied. Your only option is to apply a workaround such that your menu is not technically contained within the div. This article also describes such an approach.
I would use a transparent png as a background image for modern browsers and a filter in IE6, as described in this article: Cross Browser Background Transparency With CSS