|
CSS - Background Move Under Banner
i am writing a site for fun to learn how websites work. The site i write right now will be like a school newspaper. I have one problem with the background, at the begining i couldnt make it no repeat but later i did it, now, i got something wrong with my code. PLease help me here is my code: ( i mean that the back ground color does not appear!!
Code: <html>
<head>
<title>
blah blah
</title>
</head>
<body bcolor="#004d79">
<center>
<img src="/pics/banner.png">
</center>
<h4>
<b>
<center>
blah blah
</center>
</b>
</h4>
<style type="text/css">
<!--
body {background-image: url(pics/background.png); background-repeat: no-repeat;}set to background-repeat: no-repeat;background-position:center;
</style>
<center>
<b>
(C) blah blah
</b>
</center>
<center>
<div style="position:absolute;top:130px;left:375px">
<h1>
<b>
<p>
Our website is under construction!!<br>Thank you for visiting us!!
</p>
</b>
</center>
</h1>
</div>
<div style="position:absolute;top:250px;left:260px">
<b>
<p>
blah blah
</p>
</b>
</center>
</div>
</html>
Thanks alot, J. Similar TutorialsHello. I am trying to center the text in my right column menu found at http://www.invisionshosting.com/v2/terms_of_service.php If you take a look, you will see that the h2 (title bar) as well as each button has the text positioned at the top, and I need the text positioned in the center. I have tried padding-top: 5px; to position the text to the center, but just as I thought it would do, it moves the background down as well, causing a gap to form between each element. I need each button, including the title, to remain with a tight fit as it is now while positioning the text in the center. The CSS I am using is as follows: Code: #menu_right {
width: 200px;
color: #702208;
font-family: Arial, verdana, san-serif;
list-style: none;
padding: 0 0 0 2px;
margin: 0;
font-size: 11px;
}
#menu_right h2 {
color:#ffffff;
background-image: url(../images/right_column_header.png);
background-repeat: no-repeat;
width: 200px;
height: 28px;
text-indent: 10px;
}
#menu_right ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 200px; /* Main Menu Item widths */
}
.button_main_1 { /* For Rest State */
background-image:url(../images/right_column_button_off.jpg);
background-repeat: no-repeat;
width: 200px;
height: 28px;
color: #ffe7b8;
text-indent: 30px;
font-size: 13px;
}
.button_main_1 ul li {
position: relative;
}
.button_main_1 a { /* For Rest State */
width: 200px;
height: 28px;
display: block;
color: #236a9d;
text-decoration: none;
}
.button_main_1 a:hover { /* For Rest State */
background-image:url(../images/right_column_button_over.jpg);
background-repeat: no-repeat;
width: 200px;
height: 28px;
display: block;
color: #ffffff;
text-decoration: none;
}
The HTML is as follows: Code: <div id="menu_right"> <h2 class="menu_left">Title</h2> <ul class="button_main_1"> <li class="button_main_1"><a href="#">Button</a></li> <li class="button_main_1"><a href="#">Button</a></li> <li class="button_main_1"><a href="#">Button</a></li> <li class="button_main_1"><a href="#">Button</a></li> <li class="button_main_1"><a href="#">Button</a></li> </ul> </div> Hi everyone, I'm somewhat new to CSS and so far I have been able to solve everything except for this one problem. This is code from the styles.css file in the blog that I'm building, now this is a free template that I'm using and there is also a header.php file but that has only php code. In the frist part of the css file this appears: body { font-family: Verdana, sans-serif, Arial; font-size: 80%; color: #232323; margin: 0px; padding: 0px; background: url(images/header.png) no-repeat top; } The background line is the image that appears as the background for the header portion of the site, and it is 960px X 150px. Then there's this part: #header { float: left; width: 960px; height: 156px; } Then towards the middle of the code there is this other part which also relates to the header: .top-header { float: left; width: 960px; height: 62px; padding-top: 60px; } .top-header a { color: #000000; text-decoration: none; } .top-header h1 { color: #000000; margin: 0px; padding: 0px; float: left; width: 960px; font-size: 26px; } .top-header p { color: #000000; margin: 0px; padding: 0px; float: left; width: 960px; } So the problem I'm having is that I have designed a logo that is about 460px X 100px and I want this to go on top of the already defined background layer above in the body part. I have tried "positioning" and also tried to set it as another background and it just appears all over the place. Also the picture I crafted in photoshop has an invisible background so that only the decorative text of the log shows up, so if I use the background method to insert it, it appears with a white background. So any pointers on this would be a great help. I have tried researching this all kinds of ways and I'm still not sure what to do Thanks Chas. My code works well in Internet Explorer and Safari but it does not work the way I want it to in Firefox and Opera. My items with red borders should always stay close to the blue bar in the background. But in Firefox and Opera the body background moves to the left when the window size is small, and the items with red borders appear to move away from the blue bar. The problem is the way in which these browsers center the background image for the body. Can anyone help me fix this issue? Thanks! 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">
<head>
<title>Demo</title>
<style type="text/css" media="all">
html, body {
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
text-align: center;
}
body {
background: #555 url(http://www.glidestor.co.uk/images/PageBackground.gif) repeat-y scroll 50% 0;
color: #111;
}
#page {
width: 617px;
margin: 0 auto 0 auto;
padding: 0 0 0 160px;
text-align: left;
position: relative;
border: 1px solid #55aa77;
}
#homeFeatures {
margin: 420px 0 0 0;
}
#homeFeatures #f1, #homeFeatures #f2, #homeFeatures #f3 {
padding: 0 40px 0 12px;
font-size: 9pt;
font-weight: 300;
width: 200px;
display: block;
text-decoration: none;
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="page">
<div id="homeFeatures">
<a href="#" title="Item 1" id="f1"><strong>Item 1</strong>J khfdg jkfkfhkjfsh ksh fhdk ghjkhfsdkjg hsdfjkhsdfjkkjsdf hgkjfsd hgkjfdh gkjfh kjghkjfdh kfj hkfjd hfkdjg hk jghfsdkj ghfsdjk hgfjdhg jsdfgh sdfj ghf.<span>more</span></a>
<a href="#" title="Pring Design" id="f2"><strong>Item 2</strong>T khfdg jkfkfhkjfsh ksh fhdk ghjkhfsdkjg hsdfjkhsdfjkkjsdf hgkjfsd hgkjfdh gkjfh kjghkjfdh kfj hkfjd hfkdjg hk jghfsdkj ghfsdjk hgfjdhg jsdfgh sdfj ghf.<span>more</span></a>
<a href="#" title="Item 3" id="f3"><strong>Item 3</strong>B khfdg jkfkfhkjfsh ksh fhdk ghjkhfsdkjg hsdfjkhsdfjkkjsdf hgkjfsd hgkjfdh gkjfh kjghkjfdh kfj hkfjd hfkdjg hk jghfsdkj ghfsdjk hgfjdhg jsdfgh sdfj ghf.<span>more</span></a>
</div>
</div>
</body>
</html>
Hello! I have the site (w w w . s t e f a n t r e g o . c o m /wordpress) ... and I am trying to place a tv graphic I made under my twitter feed as an aesthetic effect. Currently I have: body { background-image:url('/Images/tregotv.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:983px 400px; display:block; } This looks fine on my computer -- BUT -- when I go to my photo section, travels section, the format of the site changes. Therefore my background image and twitter feed don't align correctly. Is there any CSS way to correctly align the background image to always be positioned under my twitter feed without format issues? Or would I need to get assistance with an alternate code such as Java script, or PHP to position the picture so the twitter feed always fits inside the tv? I appreciate the help!! -Stefan twitter: @stefantrego w w w . stefantrego . c o m / w o r d p r e s s PS. Sorry for the spaced out web addresses -- due to being a new user I cannot post links right away. On this page: http://lfswear(dot)com/sites/lfs2/index.php?main_page=product_info&cPath=1&products_id=8 I can't seem to get the "Size" div to move over right to match up with the color one... Any help would be greatly appreciated. Hi all, Helping out a buddy, but am stuck myself. Possibly simple fatigue. At this site, I'd like to move the entire center container up so that it's only about 20px below the very top. As of right now, when I do this, the top BG image disappears. As you can see from the CSS, there's actually two BG images. I don't want that, I merely want the center container to cover the BG. How, please? Thanks! Chris Hi, I am looking to move my nav bar into the center www.leehughes.co.uk Am not sure how to do this, am worried about messing up the IE hacks.. Code: ul#nav {
height:1.75em;
border-top:1px solid #000;
border-bottom:1px solid #646060;
list-style:none;
margin:0; /* reset the default left margin in IE */
padding:0 .5em 0 0; /* reset the default left padding in good browsers */
background:#000;
font-size:1em;
}
#nav li {
position:relative; /* establish stacking context for the AP'd dropdown sublist */
float:right;
padding:0;
line-height:1.75em;
}
#nav li a {
float:left;
padding:0 .5em;
border-right: 1px solid #333;
color: #CCCCCC;
text-decoration: none;
}
#nav li a.first {border:none;}
#nav li:hover,
#nav li.sfhover{
background:#transparent;/* background for all links on hover */
visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
}
#nav li:hover a,
#nav li.sfhover a {color:#FFF;}/*1st level font color on hover*/
/*=== All Sublist Styles ===*/
#nav ul {
position:absolute; /* position the sublist to nearest positioned ancestor, the (#nav li) in this case*/
width:12em; /*150px*/
margin-left:-999em;/* hide the sublist */
padding:0;
left:0; /* IE6/7 need this to position the sublist correctly on hover*/
top:1.75em;
background: url(fake-image.jpg);/* IE needs some sort of BG on the nested ul */
}
#nav li li {
float: none;/*reset the float from #nav li*/
display:block;
height:auto;
line-height:1.5;
border:none;/*reset borders from #nav li*/
}
#nav li li a {
float: none;/*reset the float from #nav li*/
display:block;
width:11em;/*IE6 needs a width (12em total with padding)*/
padding:0 .5em;
border:0;
}
* html #nav li li a {display:inline-block;} /*hide an overflow bug in IE6*/
*+html #nav li li a {display:inline-block;} /*hide same overflow bug in IE7*/
/*=== Hide All Sublists ===*/
#nav li:hover ul,
#nav li.sfhover ul {
margin-left:-999em;
}
/*=== Sublist Font Colors ===*/
#nav li:hover li a,
#nav li.sfhover li a {color:#FFF;} /*2nd level font color*/
#nav li li:hover a,
#nav li li.sfhover a {color:#003366;} /*2nd level font color on hover*/
/*=== Second Level UL position on hover ===*/
#nav li:hover ul,
#nav li.sfhover ul {
margin-left: 0; /* show the sublist (line up with left border on main list items)*/
}
Thanks http://members.cox.net/sherry72/index.html that is my website. I have a stats box to the right but i want it exactly to the right of my content box. It is underneath right now. How do i change the css to make it like i want it? I'm trying to make a menu using only css basically when you hover over an li element if there is another level below it a div is moved into place to reveal the links. It is working for the top level, but I can't figure out why it won't display/work for the 3rd tier. Both the css and the html validated, a link and the code is below. Thanks for any advice. edit: I can't actually post the link but I will PM it to anyone who wants to see it halfway working. HTML: ------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "edit:no links"> <html> <head> <title>Test Page for drop menu</title> edit:there would be an include for the css here but I can't post anything resembling a link </head> <body> <div id="menuHolder"> <ul> <li><a href="#url">Advising Network</a> <div class="subHolder"> <ul> <li><a href="#url">Student PASSPort</a> <div class="bottom"> <ul> <li><a href="#url">Test 1</a></li> <li><a href="#url">Test 2</a></li> <li><a href="#url">Test 3</a></li> <li><a href="#url">Test 4</a></li> </ul> </div> </li> <li><a href="#url">Adivsor PASSPort</a> <div class="bottom"> <ul> <li><a href="#url">Test 1</a></li> <li><a href="#url">Test 2</a></li> <li><a href="#url">Test 3</a></li> </ul> </div> </li> <li><a href="#url">Form Bank</a></li> <li><a href="#url">Timeline</a></li> <li><a href="#url">Videos</a></li> <li><a href="#url">Contact</a></li> </ul> </div> </li> <li><a href="#url">Career Investigations</a> <div class="subHolder"> <ul> <li><a href="#url">Student</a> <div class="bottom"> <ul> <li><a href="#url">Test 1</a></li> <li><a href="#url">Test 2</a></li> <li><a href="#url">Test 3</a></li> <li><a href="#url">Test 4</a></li> </ul> </div> </li> <li><a href="#url">Alumni</a></li> <li><a href="#url">Parents and Family Members</a></li> <li><a href="#url">Employers</a></li> <li><a href="#url">eRecruiting</a> <div class="bottom"> <ul> <li><a href="#url">Test 1</a></li> <li><a href="#url">Test 2</a></li> </ul> </div> </li> </ul> </div> </li> <li><a href="#url">Campus Life</a> <div class="subHolder"> <ul> <li><a href="#url">Student and University Life</a></li> <li><a href="#url">Student Activities</a></li> <li><a href="#url">Commuter Services</a></li> <li><a href="#url">Community Service Learning</a></li> <li><a href="#url">USM Partnership with STRIVE U</a></li> <li><a href="#url">USM Calendar of Events</a></li> </ul> </div> </li> <li><a href="#url">Scholarships and Finances</a></li> <li><a href="#url">Academic Success</a> <div class="subHolder"> <ul> <li><a href="#url">Academic Strategies</a></li> <li><a href="#url">Courses</a></li> <li><a href="#url">Additoinal Support Resources</a></li> </ul> </div> </li> <li><a href="#url">Major Discovery</a> <div class="subHolder"> <ul> <li><a href="#url">Being Undeclared</a></li> <li><a href="#url">GO Program</a></li> <li><a href="#url">Aspirations - Early Study</a></li> <li><a href="#url">Choosing Your Major</a></li> <li><a href="#url">FAQ</a></li> </ul> </div> </li> <li><a href="#url">Orientation</a></li> </ul> </div> </body> </html> CSS ------------------- a {text-decoration:none; color:#ffffff;} #menuHolder {height:60px; background:#0072ad; position:relative; text-align:center; width:1000px; font-size:16px; margin:0px;} #menuHolder ul {list-style:none;} #menuHolder ul li {float:left; padding:0px 10px 0px 10px; line-height:60px;} .subHolder {position:absolute; left:0px; top:200px; overflow:hidden; font-size:14px; background:#0083ad;} #menuHolder ul li:hover .subHolder {left:0px; top:60px; width:1000px; text-align:center; height:60px;} #menuHolder ul li:hover {background:#0083ad;} /* sub menu */ .subHolder ul {list-style:none;} .subHolder ul li {float:left; padding:0px 10px 0px 10px; line-height:60px;} .bottom {position:absolute; left:0px; top:500px; overflow:hidden; font-size:12px; background:#0094ad;} .subHolder ul li:hover .bottom {left:0px; top:120px; width:1000px; height:60px; text-align:center; line-height:60px;} .subHolder ul li:hover {background:#0094ad;} /*bottom level*/ .bottom ul {list-style:none;} .bottom ul li {float:left; padding:0px 10px 0px 10px;} sorry I posted it again by mistake.. please delete Hi, Am editing a template within dreamweaver as it saves a lot of time for me but I can figure out how to move the right nav bar down. Am trying to include a screenshot but i can't figure out how as I am a new user and it won't let me link.. Basically, it is a two column layout with a picture under the heading and the nav bar up to the height of the picture. Am looking to expand the picture out right and center meaning the nav bar will have to come down just below the picture if you know what i mean? I have tried with design view, won't let me. Had a look at the code but nothing really there that I picked up on (considering am only a beginner).. any thoughts? Hi, I am trying to get image on the bottom right hand side of the page to align with the chart in the middle. I have it floated to the right, but I can't seem to make it move up vertically. Not sure how to do this, absolute positioning is not an option because it will be stuck there regardless of browser size. this is where the img is now, see how it is not lined up? URL this is where it is supposed to go. URL my code is this Code: <div style="float:right; vertical-align:baseline;"><img src="/free-gold-charts/gold.png" alt="Free Interactive Gold Charts" width="320" height="290" align="top"/></div> and I have it next to the code for the chart. Help! Hi I am creating a new site for a friend in Wordpress ilovelifebecause.com I can usually muddle through in css to make changes, but i'm stumped at the moment. What I am trying to do is swap around the two cream coloured boxes so the larger one is on the right, the thinner one on the left and the blue box in the middle still. I've tried a number of things in the css file but can't seem to find the right method - can anyone help? many thanks in advance Paul Hello all, More or less, i'm trying to replicate a spreadsheet type of thing online. hxxp://img241.imageshack.us/img241/4100/imagewm.jpg The white bar stays at a fixed y axis (height) no matter how far down the page you scroll. I just used position: fixed to accomplish this. However, I need it to stay stuck to the left side of the page (not just the visible browser window) at the same time. I can do this, however by making it stick to the left of the page (and thus scroll with the content when you scroll left and right), the bar will no longer scroll up and down at a fixed height I hope this makes sense to you all - if needed I can give a live demo to show what i'm talking about. I've been trying to figure this out for a while now, and no luck. Any and all help or direction is appreciated! Andrew 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>
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 Thanks for taking the time to read my question. I cannot figure out how to refer to the <img> that I have inside my <a> tag in my menu so that when the user hovers over the menu item, the icon will move. I plan on using margin to make it move, I just can't seem to refer to it correctly so that it does something. Any thoughts would be appreciated. Brad HTML: Code:
<div id="NavContainer">
<ul id="mainmenu">
<li id="mainmenu"><a href="grocery.htm">Grocery <img class="menuicon" src="images/shopping_cart_basket_Small.png" /></a></li>
<li id="mainmenu"><a href="recipe.htm">Recipe <img class="menuicon" src="images/notes_edit_Small.png" /></a></li>
<li id="mainmenu"><a href="messages.htm">Messages <img class="menuicon" src="images/Post-It_Small.png" /></a></li>
<li id="mainmenu"><a href="calendar.htm">Calendar <img class="menuicon" src="images/Calendar_Small.png" /></a></li>
<li id="mainmenu"><a href="phonebook.htm">Phone Book <img class="menuicon" src="images/cellphone_128_Small.png" /></a></li>
<li id="mainmenu"><a href="email.htm">E-mail <img class="menuicon" src="images/mail_Small1.png" /></a></li>
<li id="mainmenu"><a href="budget.htm">Budget <img class="menuicon" src="images/PiggyBank_Small.png" /></a></li>
</ul>
</div>
CSS: Code:
.menuicon {
float: left;
margin: 10px 0px 0px 10px;
padding: 0px;
}
img {
border-style: none;
}
#NavContainer ul li {
display: inline;
list-style-type: none;
background-color: #00FF00;
height: 115px;
padding: 0px;
margin: 0px;
display: block;
float: left;
}
#mainmenu a {
padding: 5px 0px 0px 10px;
margin: 0px 0px 0px 10px;
height: 105px;
width: 186px;
background-color: #3333FF;
background-image: url(images/Button1.png);
background-repeat: no-repeat;
background-position: top left;
display: block;
}
#mainmenu a:link, #mainmenu a:visited, #mainmenu a:active {
color: #000000;
text-decoration: none;
}
#mainmenu a:hover {
text-decoration: none;
}
/*This does not seem to work*/
#mainmenu a:hover .menuicon {
margin-top: 10px;
}
ok in my site I have set the header and the menu as absolute because I want the header to go over the container and the menu to go over the header but my problem is that when I zoom in or out my header and menu move position to the left is there a way to make them not move their position but still have them one on top of the other this is my site for now (it's my course at uni and I have to include all those pages in it) http://padrewa.comeze.com this is my css code for: Code: body {
background-color: #FFF;
}
#wrapper {
background-color: #FFF;
}
#header {
* border:#999 0px solid;
position: absolute;
opacity: 0.50; filter:alpha(opacity=50);
}
#menu {
* border:#999 0px solid;
position:absolute;
padding-top:80px;
padding-left:180px;
}
#content {
border:#999 0px solid;
background-color:#FFFF99;
width:1050px;
padding-top:110px;
padding-bottom:70px;
margin-left: auto;
margin-right: auto;
}
#footer {
border:#999 0px solid;
background-color:#FFFF99;
width:1050px;
margin-left: auto;
margin-right: auto;
}
and this is my header template I included it in my page using php: Code: <div id="header"><table> <tr> <td><a href="index.php"><img src="style/logo.jpg" alt="Logo" height="100" /></a></td> </tr> </table> </div> <link rel="stylesheet" href="style/style.css" type="text/css" media="screen" /> <div id="menu" > <a href="index.php"><b>Home Page</b></a> <a href="gallery.php"><b>Gallery</b></a> <a href="biography.php"><b>Biography</b></a> <a href="draw.php"><b>Draw</b></a> <a href="write.php"><b>Write</b></a> <a href="contact.php"><b>Contact Me</b></a> </div> |
|||||||