CSS - Css Coding For Alert Pop-up Window?

I am a student and we are currently learning to hand-code web sites. While I have a clear understanding of XHTML, I am having a bit of trouble with the CSS. The specific problem I am having has to do with regular text links and image links. I will try to explain so that it is not so confusing. I have seven navigation links where I have a background for each that changes color on hover. I also have 3 images that I need to add a link to, however, the background and hover block is showing behind the image links. I want the user to be able to just click on the image that leads to an external page without seeing the color block from the text links. Here is the css I have:

ul { list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px; }

li { display:inline; }

a:link,a:visited { font-weight:bold;
color:#FFFFFF;
background-color:#6899a1;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase; }

a:hover,a:active{ background-color:#7d4f77; }

I hope this provides enough information, if not, please do not hesitate to let me know. Any help I can get with this will be much appreciated.

Hello dev,

I just want to build a website for our store. I am a novice in the world of HTML and CSS coding and i am willing to learn. I already have a layout. If it is okay to ask a lot of question here until we complete the website?

I am following this tutorials http://hv-designs.co.uk/2008/05/20/psd-htmlcss/.

I want the header to look like this.
http://i618.photobucket.com/albums/tt264/raddai/header.gif

but it ended like this

http://i618.photobucket.com/albums/tt264/raddai/headers.gif

how do i move the menu into the header?

here is my css and html code.

Code:

/********************************************
HTML ELEMENTS
********************************************/
/* top elements */
* { margin: 0; padding: 0; outline: 0; } /*sets no padding or margin around the body of our document*/

body {
background-color: #15181c; /*website background color (white)*/
background-image: url(images/bg.gif); /*sets the background image, in our case the stripey background*/
background-repeat: repeat; /*repeats our background over and over*/
color: #ffffff; /*sets our text color for our website*/
margin: 15px 0; /*sets no padding and a 15px margin around the body of our document*/
font-family: Helvetica Neue LT Com, Verdana, Tahoma, arial, sans-serif; /*sets the font family for our website*/
font-size: 70%; /*sets the font size in %, you can also use 12px or 14px etc... px stands for pixels*/
line-height: 1.5em; /*sets the height between each line of text.*/
}
/********************************************
WEBSITE LAYOUT
********************************************/
#wrap {
width: 1024px; /*width of our wrap*/
background: #CCC url(images/content.jpg) repeat-y center top; /*sets our background color to white and uses our content.jpg as a background, the background is also repeated along the Y axis*/
margin: 0 auto; /*center our margin to auto will center our website*/
text-align: left; /*aligns our text to the left*/
}
#content-wrap {
clear: both; /*The clear property sets the sides of an element where other floating elements are not allowed.*/
width: 1024px; /*width of our wrap*/
margin: 5px auto; /*sets our top margin at 5 pixels and the rest to auto*/
padding: 0; /*sets 0 padding*/
}
#header {
position: relative; /*An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position*/
height: 190px; /*sets our header height, this should be the same as our header image*/
background: #15181c url(images/header.gif) no-repeat left top; /*sets a background behind our header and sets our header image onto the page*/
padding: 0; /*no padding is needed*/
}
/********************************************
WEBSITE NAVIAGTION
********************************************/
#menu {
clear: both; /*No floating elements allowed on either the left or the right side*/
margin: 0 auto; /*Margins*/
padding: 10; /*Padding*/
background: #15181c url(images/menu.gif) no-repeat; /*Our menu background*/
height: 48px; /*The height of the menu */
width: 567px; /*The width of the menu */
font-family: Verdana, Arial, Helvetica, sans-serif; /*The font family*/
font-size: 18px; /*The font size*/
line-height: 40px; /*The line-height property sets the distance between lines.*/
}
#menu ul {
float: left; /*Floats our menu to the left*/
list-style: none;
margin:0; padding: 0 0 0 20px;
}
#menu ul li {
display: inline; /*The element will be displayed as an inline element, with no line break before or after the element*/
}
#menu ul li a {
display: block;
float: left;
padding: 0 15px;
color: #fffff /*Font color*/
text-decoration: none;
}
#menu ul li a:hover {
color: #E00000; /*Mouseover hover color*/
}

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="en" lang="en">  
<head>  
  
<meta name="Description" content="PhiLour Sign, Engraving &amp;amp; media" />  
<meta name="Keywords" content="your, keywords" />  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<meta name="Distribution" content="Global" />  
<meta name="Author" content="" />  
<meta name="Robots" content="index,follow" />  
  
<link rel="stylesheet" href="css_styles.css" mce_href="css_styles.css" type="text/css" />  
  
<title>PhiLour Sign | </title>  
  
</head>
<body>  
<!-- wrap starts here -->  
<div id="wrap">  
<div id="header">  
<!--HEADER INFO WILL GO HERE -->  
</div>  
<div id="menu">  
<!--NAVIGATION HERE -->  
<!-- navigation -->
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Catalog</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</div>  
  
<!-- content-wrap starts here -->  
<div id="content-wrap">  
<div id="main">  
<!--MAIN CONTENT HERE -->  
</div>  
<div id="sidebar">  
<!--SIDE BAR LINKS HERE -->  
</div>  
  
<!-- content-wrap ends here -->  
</div>  
<div id="footer">  
<!--FOOTER HERE -->  
</div>  
  
<!-- wrap ends here -->  
</div>  
  
</body>  
</html>  

i hope everybody help me thank you.

i am new to css and want to use a background image for my navigation/link lists....

i have been working on this ALL DAY and have changed so much of the code i really have screwed everything up...

i want the RESOURCE title to move up more toward the top of the graphic....

and my lists are totally messed up -- i want them all to be UL not OL... and none of the link attributes are working at all...

please check my code and tell me what is WRONG- i am sure there are alot of mistakes...

I had things perfect in the ARTWORK part of the code and then worked on the RESCOURCES and somehow EVERYTHING got majorly messed up--
i am now totally confused and am about to tear my hair out .....or worse

i am desperate!!!!

thanks so much for any help that can be provided....i really appreciate it



graphic

here is the entire code--

#linkList {
background-color: transparent;
background-image: url(IMAGES/navbar2a.jpg);
height: 364px;
width: 185px;
background-repeat: no-repeat;
position: absolute;
margin: 100px;
top: 100px;
}


#linkList h3 { THIS IS "ARTWORK"
font-family: verdana, sans-serif;
font-size: 12px;
font-weight: bold;
height: 10px;
margin-top: 20px;
margin-right: 20px;
margin-left: 20px;
padding-left: 30px;
padding-right: 30px;
padding-top: 1px;
width: 151px;
color: yellow;

}

#lresources { THIS IS "RESOURCES"

font-family: verdana, sans-serif;
font-size: 12px;
font-weight: bold;
color: yellow;
margin-left: 20px;
padding-bottom: 10px;
padding-left: 29px;
padding-right: 29px;
padding-top: 10px;



#linkList li {
background-color: transparent;
display: block;
color: yellow;
line-height: 3em;

margin-left: 5px;
padding-bottom: 2px;
padding-left: 50px;
padding-right: 50px;
padding-top: 1px;
}


#linkList2 {
font-family: verdana, sans-serif;
font-weight: bold;
font-size: 10px;
color: lime;
margin-bottom: 48px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding: 0px;
}


NONE OF THESE ARE WORKING
#linkList li a:link {
background-color: transparent;
color: lime;
list-style-type: none;
}

#linkList li a:visited {
background-color: transparent;
color: white;
}


#linkList LI A:hover, #linkList A:active {
background-color: fuchsia;
color: yellow;

}

Hello, Im having a particular problem with my website (freemyblackberry).

I need to add adsense to my site but have had issues with editing the CSS form.

I wish to add 2 120X600 tiles directly beside the main body (on opposite sides of the main body), though when I do so and resize the browser, the ads go under the main body or go to the outside edges. I need to them to stay stationary in regards to the body. Are you able to help me?

A copy of the CSS is pasted below:


@charset "utf-8";
body { margin:0; padding:0; width:100%; background: #282828 url(images/main_bg.gif) top center no-repeat;}
html { padding:0; margin:0;}

.main { margin:0 auto; padding:0;}
.main1 { margin:0 auto; padding:121012012;}
/********** header **********/
.header_resize {background: #110f0b url(images/header_bg1.gif) top center no-repeat; margin:0; padding:0; height:490px;}
.header_resize2 {background: #110f0b url(images/header_bg1.gif) top center no-repeat; margin:0; padding:0; height:200px;}
.header { width:960px; padding:0; margin:0 auto; }
.header h2 { font: bold 36px Arial, Helvetica, sans-serif; color:#fff; padding:25px 0 0 0; margin:0; width:370px; float:left;}
.header p { width:320px; float:right; font: normal 12px Arial, Helvetica, sans-serif; color:#fff; line-height:1.8em; padding:25px 0 0 0; margin:0;}
/* logo */
.logo {padding:0; margin:0; width:148px; float:left;}
.logo_text { text-align:right; width:700px; float:right; padding:20px 0 14px 0; margin:0; font: italic 11px Arial, Helvetica, sans-serif; color:#815e67;}
.logo_text a { text-decoration:none; color:#815e67;}
/*menu*/
.menu_resize {width:410px; background:url(images/menu_bg.gif) top no-repeat; float:right;}
.menu { padding:0; margin:0 auto; }
.menu ul { text-align: left; padding:0; margin:0; list-style:none; border:0; float:left;}
.menu ul li { float:left; margin:0; padding:0 5px; border:0;}
.menu ul li a { float:left; margin:0; padding:12px 0; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a span { padding:12px 9px; background:none;}
.menu ul li a:hover { background: url(images/r_menu.gif) no-repeat right;}
.menu ul li a:hover span { background:url(images/l_menu.gif) no-repeat left;}
.menu ul li a.active { background:url(images/r_menu.gif) no-repeat right;}
.menu ul li a.active span { background:url(images/l_menu.gif) no-repeat left;}
/* body */
.body_resize { background: url(images/body_bg.gif) top repeat-y; padding:0; width:963px; margin:0 auto;}
.body_resize_top { background: url(images/body_top_bg.gif) top no-repeat; margin:0px auto; padding:10px 0px;}
.body_resize_top_resize { margin:10px auto; padding:0 10px;}
.body_resize_bottom { height:13px; margin:0; padding:0; width:963px; background:url(images/body_bottom_bg.gif) bottom no-repeat;}
.body { padding:20px 0; margin:0 auto; background:#e6e6e6; border-top:1px solid #f5f5f5; border-bottom:1px solid #ececec;}
.body h2 { font:normal 20px Arial, Helvetica, sans-serif; color:#000; padding:10px 5px; margin:0;}
.body h3 { font:bold 14px Arial, Helvetica, sans-serif; color:#2a2a2a; padding:10px 5px; margin:0; text-transform:uppercase;}
.body p { font:normal 12px Arial, Helvetica, sans-serif; color:#000; line-height:1.8em; padding:5px 5px; margin:0;}
.body p span { color:#5e5e5e; font: normal 11px Arial, Helvetica, sans-serif; line-height:1.8em; padding:5px 0; margin:0;}
.body p strong { color:#974960;}
.body p.small { text-transform:uppercase; font: normal 12px Arial, Helvetica, sans-serif; color:#868686; line-height:1.8em; padding:0 0 0 80px; margin:0;}
.body a { color:#141414; text-decoration:none; font: bold 11px Arial, Helvetica, sans-serif;}
.body img { float:left; margin:5px 15px 5px 5px; padding:0;}
.body img.floated { float:right; margin:5px 20px; padding:0;}
.right { width:325px; margin:10px 8px 10px 0; padding:0 10px; float:right;}
.left {width:560px; margin:10px 8px 10px 0; padding:0 10px; float:left;}
.left_blog {width:250px; margin:10px 8px 10px 0; padding:0 10px; float:left;}
.port { background: url(images/port_bg.gif) top repeat-y; padding:0; width:259px; margin:10px 10px 10px 20px; float:left;}
.port_top { background: url(images/port_bg_top.gif) top no-repeat; margin:0px auto; padding:10px 0px;}
.port_bottom { height:11px; margin:0; padding:0; width:259px; background: url(images/port_bg_bottom.gif) bottom no-repeat;}
/* FBG */
.FBG_resize { background: #dcdcdc; margin:0; padding:0; border-top:1px solid #d0d0d0;}
.FBG { margin:0 auto; padding:20px 0; width:960px;}
.FBG h2 { font:bold 14px Arial, Helvetica, sans-serif; color:#2a2a2a; padding:10px 5px; margin:0; text-transform:uppercase;}
.FBG p { font:normal 11px Arial, Helvetica, sans-serif; color:#5f5f5f; line-height:1.8em; padding:5px 5px; margin:0;}
.FBG img { float:left; margin:5px 10px 15px 5px; padding:0;}
.FBG .blog { width:290px; float:left; margin:10px 0 10px 15px; padding:5px;}
/********** contact form **********/
#contactform { margin:0; padding:5px 10px; }
#contactform * { color:#2a2a2a; }
#contactform ol { margin:0; padding:0; list-style:none; }
#contactform li { margin:0; padding:0; background:none; border:none; display:block; clear:both; }
#contactform li.buttons { margin:5px 0 5px 0; clear:both; }
#contactform label { margin:0; width:150px; display:block; padding:10px 0; color:#2a2a2a; font: normal 12px Arial, Helvetica, sans-serif; text-transform:capitalize; float:left; }
#contactform label span { color:#F00; }
#contactform input.text { width:380px; border:1px solid #d8d8d8; margin:2px 0; padding:5px 2px; height:16px; background:#f9f9f9; float:right; }
#contactform textarea { width:380px; border:1px solid #d8d8d8; margin:2px 0; padding:2px; background:#f9f9f9; float:right; }
#contactform li.buttons input { padding:3px 0 3px 460px; margin:10px 0 0 0; border:0; color:#FFF; float:left; }

/*************footer**********/
.footer_resize { width:960px; margin:0 auto; padding:10px 0;}
.footer p { font:normal 11px Arial, Helvetica, sans-serif; color:#737373;}
.footer a { font:normal 11px Arial, Helvetica, sans-serif; color:#737373; text-decoration:none; padding:5px; margin:0;}
.footer p.leftt { text-align:left; width:50%; margin:0; padding:10px 0 0 20px; float:left;}
.footer p.rightt { text-align:right; width:30%; margin:0; padding:15px 20px 0 0; float:right;}
.footer {padding:0; margin:0 auto; background:#1c1c1c; border-top:1px solid #2a2a2a; }

p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
li.bg, .bg { float:right; clear:both; border-top:1px solid #e1e1e1; width:100%; padding:0; margin:5px 0; background:none; line-height:0;}

/* Slider */
#slider { width:960px; padding:0 0 0 0; margin:0 auto;}
div#slideshow { float: left; width: 100%; height: 318px; }
.slider-item { width: 100% !important; height: 318px; }
.slider_content_inner img { border: none; }
.controls-center { width: 960px; margin-left: auto; margin-right: auto; }
#slider_controls { float: right; position: relative; background:url(images/pag_bg.gif) no-repeat top center; margin:0; z-index: 1000; width:960px; height:23px;}
#slider_controls ul { margin:0 auto; padding:2px 0; width:54px;}
#slider_controls ul li { margin: 0; padding: 0; list-style: none; }
#slider_controls ul li { float: left; display: block; }
#slider_controls ul li a { width: 10px; height: 10px; background:url('images/tabs_2.gif') no-repeat center center; display: block; float: left; padding:2px; margin:2px !important; margin:1px 1px; outline: none; }
#slider_controls ul li a:focus { outline: none; }
#slider_controls ul li a:hover,
#slider_controls ul li a.activeSlide { background:url('images/tabs_1.gif') no-repeat center center; }


#leftcontent {
position:absolute;
margin: 30px auto;
width:120px;
top:200px;
left:300px;
background-color:#eee;
padding:10px;
width:120px;
}

#rightcontent {
position:absolute;
margin: 30px auto;
width:120px;
top:200px;
right:300px;
background-color:#eee;
padding:10px;
width:120px;
}

This threads over with.

I know that nobody uses frames any more and I'm not in favour of them myself but as part of a programming assignment I have to create a page with frames. I want to have no frame borders visible but I can't for the life of me get the correct syntax. I can make the frames seamless using inline commands like frameborder="no" Border="0" and framespacing="0" but I'd like to put these into a css.

With my limited knowledge of css, html, etc.
I can mold my page to look just the way I desire on my given screen size (1280x1024) and browser (mozilla) but can not seem to get a fix for all variables (1024x768, etc.).

I've tried containing divs & percents and a few other solutions to no avail. Just want to know if you guys know any quickfix or a recommended strategy in tackling this issue going further.

id post code here, but the site wont allow it due to external links.
so please check it out here and let me know

http://needaputer.com
css is at same url just located at .com /css/styles.css

my goal:
-- auto center content on page horizontally - (based on screen size - cross browser compatible)
-- make sure header and footers are absolute top and bottom of page always (based on page size and cross-browser compatible)
-- toggle "page zoom" for entire page via buttons (if needed and possible to adjust content for each screen size)

Hi,

I am using html and css to design a website. My problem is that when I resize the web browser, all of the elements reposition themselves accordingly. Is there some to keep them all fixed in position? Thanks!

I'm having some problems when I resize a window from full size and make it smaller in width. I have a stationary graphic that remains in position even if the user scrolls the window up and down, which is what it is supposed to do. However, when I reduce the width of the overall window, the background now scrolls right and left and the graphic covers things it is not supposed to. Is there a way to allow the graphic to scroll right and left if the window can be scrolled right and left but to leave the graphic stationary otherwise?

Here's what I have in the style sheet:

Code:

.pagegraphic{
	float:left;
	height:173px;
	position: fixed;	/* this keeps the coin fixed and allows the background to scroll behind it */
	width:170px;
	z-index:99;
}

Another problem that occurs when the user can scroll horizontally. When the user resizes and then scrolls right, the background of the window is cut off on the right to the size of the resized window, so you only see a white background past that point.

Any suggestions are appreciated.

Hello All. I'm working on an assignment for an introductory level html/css class. The assignment asks me to change the Window Background color to 666666. How do i do this? So far i've only be able to change background colors of element tags, which is not what i need. This was the Example give for this particular step.

Edit: i tried to link a picture for a visual. For some reason its blocked to new members.

Any help would be appreciated.

hey all,
hopefully someone in here will be able to help me. what I am interested in is how to tell a div to render at the base of the page, once I have it there I intend to make it float so that it is always at the base. does anyone know the x,y positions for the very bottom of the displayed window? any help would be greatly appreciated, thanks in advance.

First of all I apologize if this is a stupid question, I am 1st year student. For the project I had to make an IT store type website.

My problem is I have two div's in the container which i have positioned to be fixed at the top left of the page outside the container, this is so the user can see these div's at all times.

When I make the window smaller it shrinks to the container and the div's in question appear on top of the content.

I have tried styling the body with margins, padding and min-width.

All I want is the page to remain the same when I re-size the window.

I hope this is enough info for someone to understand my problem, i have included the css from the parent div's any help would be greatly appreciated.

* { margin: 0; padding: 0; }

* html #container { height: 100%; }

html { height:100% !important;
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-image: url(../images/header/Home.jpg);
background-origin: padding-box;
background-position: center;
background-repeat: no-repeat;
background-size: cover; }

body { height:100% !important; }

#outer { width: 100%; height: 100%; }

#container { min-height: 100%; width:940px; padding: 8px 10px; background: #000; margin:0 auto; text-align:left; font-size: 100%; overflow: hidden; }

* html #container { height: 100%; }

Hello;

Could anyone tell me how to addjust my result to the top(10% away from the top)? please.

I try to use margin-top:10%, but it does not work.

Please go to my website http://www.businessfind101.com/ and type the sentence with "MySql YourSql" into search function, you will see the result in the button, i have not idea to move them up.

and my code as following;

Code:

php
 session_start(); 
 $aString=$_REQUEST["SText"];
 $_SESSION["aString"]=$aString;
 
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

</head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<style type="text/css">
 table.display{margin-top:10%}

 </style>

<body>
 
 
<?php
 
 
 $con = mysql_connect("localhost", "#*$!","1#*$!");
 if (! $con)
 {
 die('Could not connect: ' . mysql_error());
 }
 mysql_select_db("#*$!x", $con);

 $result = mysql_query("select * from Customer2");
 
 // was it a success
 if (!$result)
 die ("Error processing request - check your query");
 
 // process results
 $nrecs = mysql_num_rows($result);

 
 /* Use tab and newline as tokenizing characters as well */
 $tok = strtok($aString, " ");
 while ($tok!== false) {
 
 $len=strlen($tok);
 $len=$len/2+1;
 $tok=substr($tok,0,$len);

 $b="tu";
 $myresult=mysql_query("SELECT * FROM Customer2 WHERE MATCH (Topic,Des)
 AGAINST ('$tok*' IN BOOLEAN MODE);");

 while($row=mysql_fetch_array($myresult)){
 echo "<br>";
 
 echo "<br>";
 echo " ";
 $Cid=$row['Cid'];
 echo " ";
 $row['Count']=$row['Count']+1;
 $Count=$row['Count'];
 mysql_query("update Customer2 set Count='$Count' where Cid='$Cid'");
 }

 $tok = strtok(" ");
 }

 $result = mysql_query("select * from Customer2");
 echo "<table border=0 width=50% class='display' bgcolor='ccffff'>";

//i will display result on the screen 
 while ($row=mysql_fetch_array($result)){
 
 if($row['Count'] >0){
 echo "<tr><td>";
 echo $row['Des'];
 echo "</td><td>";
 echo $row['Count'];
 echo "</td> </tr>"; 
 }

 }
 $f=0;
 mysql_query("update Customer2 set Count='$f'"); 

 echo "</table>";
 
mysql_close($con);

?> 

</body>
</html>

Hello,

I have a menu to the right and the main content is on the left.
When I resize the window the content drops below the menu.
Is there anyway to stop this from happening?
[Do you need to see code?]

Cheers