So I am coding my final project for HTML and when formatting pictures, I accidentally put it too far to the right and it extended my web page horizontally and now that I have fixed the image there is a lot of extra space on the right side. The same thing happened vertically but I just set my height to 100% for my body tag and it took care of it, I tried doing this with width but it just shrinks my content while not changing the physical size of the web page. I would appreciate any help you guys could provide. Here is picture of the web page enter image description here
Here is code
<html>
<title> Bodybuilding </title>
<head>
<style>
.image1 {
z-index: -1;
}
.active {
background-color: #000000
}
.image2 {
position: absolute;
right: 26px;
top: 10px;
}
.title {
position: relative;
top: -250px;
border-style: solid;
border-color: #0E878A;
font-size: 49.5px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
top: -245px;
background-color: #333;
border-top: 2px solid #bbb;
border-left: 2px solid #bbb;
border-bottom: 2px solid #bbb;
border-radius: 10px;
}
li {
float: left;
border-right: 2px solid #bbb;
}
li a {
display: inline;
color: #0E878A;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 35px;
}
li a:hover {
background-color: #111;
}
h2 {
position: relative;
top: -797px;
}
p {
position: relative;
top: -797px;
font-size: 30px;
}
.arnold {
position: relative;
left : 1130px;
top: -235px;
}
body {
background: linear-gradient(#939FA0,#41858B);
height: 100%;
width: 98.27%;
}
h3 {
position: relative;
top: -765px;
</style>
</head>
<div class="image1">
<img src="bbifbb.png" width="359" height="250">
</div>
<div class="image2">
<img src="bbphil.jpg" width="359" height="250">
</div>
<div class ="title">
<center>
<h1> Bodybuilding </h1>
</center>
</div>
<body bgcolor="#939FA0">
<body>
<ul>
<li><a class = "active" href="bbfinal.html">Home</a></li>
<li>Famous Bodybuilders</li>
<li>Mr. Olympia</li>
<li>Steroids</li>
<li>Modern Bodybuilders</li>
<li>Competitions</li>
<li>Find Competitions</li>
<li>Contact Me</li>
</ul>
<div class ="arnold">
<img src="bbarnold.jpg">
</div>
You are doing the following in your code:
.arnold {
position: relative;
left : 1130px;
top: -235px;
}
Since the position is relative, the left property sets the left edge of all elements with class 'arnold' to be 1130 pixels to the right of their normal position. That results in the extra scroll space to the right.
Related
So I've been testing how my website looks with different screen sizes and I noticed my footer is positioned correctly at the bottom right of the screen for resolutions 800x600 to 1920x1080 BUT on 2560x1600 it does NOT position at the bottom right
/w h y/ ?
Im using CrossBrowserTesting
Here's my code:
body {
font-family: 'Courier New', Courier, monospace;
background: linear-gradient(to bottom, #1D4350 , #A43931);
background-attachment: scroll;
}
html, body, #wrapper {
max-width: 100%;
min-height: 100%;
min-width: 960px;
margin: 0 auto;
}
#wrapper {
position: relative;
}
#content {
height: 1200px;
}
.Octagon {
color: #2aa186;
text-align: center;
line-height: 30%;
margin-top: 25px;
}
.LT {
text-align: center;
color: #3a5454;
line-height: 0%;
font-style: italic;
}
.boi {
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
right: 16px;
}
.boi:active {
top: 2px;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
}
#verr {
}
.boi:active,
.iob:active {
top: 2px;
}
#manyarms {
position: absolute;
margin-top: 30px;
margin-left: 31px;
}
#sensible {
position: absolute;
margin-top: 30px;
margin-right: 31px;
right: 10px;
}
.boi:hover,
.iob:hover {
text-shadow: 0 0 10px #a193ff;
}
#footer {
padding-left: 93%;
}
<html>
<head>
<title>The Pragmatic Octopus</title>
<meta charset="utf-8"/>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 class="Octagon">The Pragmatic Octopus</h1>
<p class="LT">Lee Townsend</p>
<a href="www.google.com">
<p class="boi">Contact</p>
</a>
<a href="www.google.com">
<p class="iob">Information</p>
</a>
</div>
<div id="content">
<div id="manyarms">
<img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792 .jpg" alt="mmm~" style="width:310px; height:250px;">
<p style="color: #6458b7;" id="verr">Here comes a very special boi!</p>
</div>
<div id="sensible">
<img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" style="width:310px; height:250px;">
<p style="color:#6458b7;">He loves to pose for photos!</p>
</div>
</div>
<div id="footer">
© Hecc
</div>
</div>
</body>
</html>
Is this an error in my code or this a bug in CrossBrowserTesting?
Any assistance is greatly appreciated!
If you replace your :
#footer {
padding-left: 93%;
}
with
#footer {
float: right;
margin-right: 10px;
}
You will fix your div on the right and that regardless if the screen is large, medium or small.
your #wrapper streches and its css is - max-width: 100%;and your #footer is inside the #wrapper
soo maybe your content doesnt stretch the wrapper to full width and thats why the #footer isnt in the far right of screen(because its in far right of #wrapper)try to take #footer out of #wrapper OR make #wrapper width:100% and body and html width:100%
I want to make a vertical menu with submenu's and the submenu have to go next to the parent div.
Hope you guys know how to do that, I did a look on google but only found results like 2 divs next to eachother. But I need that the child div have to get next of it.
My code for now:
HTML
<div id="menuCont">
<div class="menuItem">
Applicatie Ontwikkeling
<div class="subMenuCont">
<div class="subMenuItem">HTML</div>
<div class="subMenuItem">CSS</div>
<div class="subMenuItem">jQuery</div>
</div>
</div>
<div class="menuItem">
Netwerk Beheer
</div>
<div class="menuItem">
Server Beheer
</div>
</div>
CSS
#menuCont {
width: 17.5%;
text-align: center;
}
.menuItem {
width: 100%;
padding: 1em;
background-color: #ffffff;
color: #000000;
font-family: Lato;
font-size: 125%;
border: 1px solid #7266ff;
border-bottom: 0;
cursor: pointer;
}
.menuItem:first-child {
border-top-left-radius: 1.5em;
}
.menuItem:last-child {
border-bottom: 1px solid #7266ff;
border-bottom-right-radius: 1.5em;
}
.menuItem:hover {
background-color: #7266ff;
color: white;
}
.subMenuCont {
/*display: none;*/
position: relative;
/*left: 100%;*/
/*width: 90%;*/
}
.subMenuItem {
border: 1px solid #7266ff;
border-bottom: 0;
}
.subMenuItem:last-child {
border-bottom: 1px solid #7266ff;
}
Do you need any more info, please say it. for now I don't know what to give as more info.
In your CSS Code I changed the position element to absolute, that allows you to place the element exactly where you want:
.subMenuCont {
position: absolute;
top:0;
left: 17.5%;
width: 17.5%;
}
I just have a quick question about my website. I have a huge whitespace between my footer and the end of my background image, about 500 or so pixels. I can't seem to find the problem and any help is appreciated.
Thanks,
Jacob
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link type="text/css" rel="stylesheet" href ="C:\Users\toshiba\Documents\NetBeansProjects\HTML5Application\public_html\css\index.css">
<meta charset="UTF-8">
<title> JP's Webservices</title>
</head>
<body>
<div id ="body">
<div class = "nav">
<ul>
<li>
About Me
</li>
<li>
Contact Me
</li>
<li>
Pricing
</li>
</ul>
</div>
<div class ="jumbotron">
<div class ='container'>
<div id ='h1'>
<h1> Need a website but don't know how? Look no further </h1>
</div>
<p> Web engineer for hire
</div>
</div>
<div style='align:center;text-align:center' class ="des" >
<h2> Knowledge. </h2>
<p> Straight 'outta Compton </p>
<hr>
<h2> Commitment. </h2>
<p> To excellence and to serve </p>
<hr>
<h2> Perspective. </h2>
<p> New outlook on your web designs </p>
<br>
</div>
</div>
</body>
<footer>
<div id ='footer'>
<p> Copyright #2014-2015 Jacob Platin
</div>
<div id ='footer1'>
<div id ='foot1'>
<a href="https://twitter.com/TheJakeoShark" target=newtab><img src="https://g.twimg.com/Twitter_logo_blue.png" width="72" height="46" border="0" /></a>
</div>
<div id ='facebook'>
<a href ='https://facebook.com/jacob.platin' target=newtab><img src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/267px-F_icon.svg.png' width ="65" height =" 53" /></a>
</div>
</div>
</footer>
</html>
CSS
.jumbotron {
background-image: url(http://cam-consultants.net/wp-content/uploads/2014/05/servers.jpg);
z-index: 110;
position: relative;
}
.des {
position: relative;
bottom: 1564px;
background-color: #e3e3e3;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
box-shadow: 1px 5px 35px black;
text-align: center;
width: 1050px;
height:1000px;
position: relative;
z-index: -1;
margin: 0 auto;
}
.nav li {
list-style-type: none;
text-align: center;
float: left;
width: 33.3%;
position: relative;
z-index: 10;
color: black;
padding-top: 12px;
font-weight: 700;
font-size: 18px;
}
.nav {
background-color: #660000;
height: 65px;
box-shadow: 2px 2px 8px 3px black;
}
.nav a {
text-decoration: none;
color: black;
padding-top: 15px;
font-weight: 700;
color: white;
}
.container > p {
padding-top: 100px;
height: 500px;
position: relative;
bottom: 140px;
font-weight: 700;
color: #cc0000;
text-align: center;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px blue;
}
.jumbotron {
background-image: url(http://cam-consultants.net/wp-content/uploads/2014/05/servers.jpg);
background-position: -10px -60px;
z-index: -1;
height: 1700px;
}
#h1 {
position: relative;
top: -50px;
text-align: center;
font-family: 'Georgia', times, serif;
background-color: black;
color: #e3e3e3;
text-shadow: 5px 5px 5px white;
height: 150px;
width: auto;
margin: 0;
margin-left: 44px;
margin-right:44px;
position: relative;
z-index: -1;
}
#master_wrapper{overflow:hidden!important;}
#footer {
width: 2000px;
height: 200px;
background-color: black;
box-shadow: 1px 1px 12px 4px black;
position: relative;
bottom: -100px;
}
#footer1 {
height: 78px;
width: 2000px;
background-color: #660000;
position: relative;
margin-top: 24px;
}
#footer > p {
text-align: center;
font-family: 'Georgia', sans-serif;
color: white;
font-size: 18px;
padding-top: 24px;
}
#foot1 {
padding-top: 15px;
text-align: center;
}
#facebook {
position: relative;
bottom: 123px;
text-align: center;
}
.des > h2 {
padding-top: 80px;
color: #660000
}
#photo1 {
background-image: url(http://financeandcareer.com/wp-content/uploads/2013/03/webProgrammingInternship.jpg);
width: 240px;
height: 200px;
position:relative;
}
.des > img {
margin-top: 40px;
box-shadow: 01px 01px 01px 5px black;
}
When you use position: relative; the browser thinks, "Ok, I'm going to keep the element's technical location the same, but I'm going to make it appear to be in a different spot." You have the following CSS on your .des element:
.des {
position: relative;
bottom: 1564px;
}
This says, "Keep .des there, but make it appear 1564 pixels higher (further away from the original bottom)". This results in a blank space, which is the height of the element, showing up where the element technically still is, even though it appears elsewhere.
You also have the following CSS on your #footer element:
#footer {
position: relative;
bottom: -100px;
}
This makes it appear 100px lower on the page, but keeps the original spot there, and now blank.
Unless I'm mistaken, these two gaps combine for a whopping 1038px of blank space on your page. The solution? You're probably looking for position: absolute;, which doesn't keep the original spot for the element. In fact, I think that if you changed the positioning part of the CSS on .des to be
.des {
position: absolute;
top: 260px;
}
or something close to that, it would get rid of most of the gap, minus the 100px on #footer. Here's a JSFiddle, if you'd care to have a look.
The height of your background image in your CSS is set to height: 1700px; but the background image that you link to is only 1200px high. That would seem to account for the 500px difference
I am having trouble with my footer menu links and social icon buttons. I created the footer so that it will stretch across the entire browser window. However now when I lay the menu links and social media icons inside the div they are moving whenever the page is re-sized. What do I need to do in order to make the placement of the menu links and social media links stay in the proper place?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MECA Basketball Club</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1">
</script>
<script type="text/javascript" src="jQuery/infinite-rotator.js"></script>
<script type="text/javascript" src="jQuery/infinite-rotator-2.js"></script>
<script type="text/javascript" src="jQuery/infinite-rotator-3.js"></script>
<script type="text/javascript" src="jQuery/infinite-rotator-4.js"></script>
<style type="text/css">
body
{
background-image: url(img/backgroundimg.png);
background-repeat: repeat-x;
/*background-color:white;*/
}
#maincontainer
{
width: 1024px;
margin: 0 auto;
}
#header
{
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 47px;
background-image: url(img/headerimg.png);
}
#headerlogo
{
position: absolute;
top: 0;
width: 201px;
height: 118px;
background-image: url(img/headerlogo_padding.png);
}
#header-nav-menu
{
position: relative;
left: 580px;
top: 0px;
width: 400px;
list-style-type: none;
}
.nav-button-header-menu-1
{
float: right;
font-family: Calibri;
color: white;
text-decoration: none;
width: 125px;
}
.nav-button-header-menu-2
{
float: right;
font-family: Calibri;
color: white;
text-decoration: none;
width: 104px;
}
.nav-button-header-menu-3
{
float: right;
font-family: Calibri;
color: white;
text-decoration: none;
width: 105px;
}
.nav-button-header-menu-1:hover
{
color: #d4d3d2;
}
.nav-button-header-menu-2:hover
{
color: #d4d3d2;
}
.nav-button-header-menu-3:hover
{
color: #d4d3d2;
}
#main-nav-container
{
width: 197px;
height: 500px;
float: left;
margin-top: 95px;
}
#mainnav
{
position: relative;
top: 0px;
left: 0px;
list-style-type: none;
margin: 0;
padding-left: 8px;
}
.navbutton-red-top
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: #c41002;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #a30e03;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
border-radius: 10px 10px 0px 0px;
box-shadow: 0px 3px 8px #515050;
}
.navbutton-red
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: #c41002;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #a30e03;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
box-shadow: 0px 3px 8px #515050;
}
.navbutton-black
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: black;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #515050;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
box-shadow: 0px 3px 8px #515050;
}
.navbutton-black-bottom
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: black;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #515050;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
border-radius: 0px 0px 10px 10px;
box-shadow: 0px 3px 8px #515050;
}
.navbutton-red-top:hover
{
background: #e91101;
}
.navbutton-red:hover
{
background: #e91101;
}
.navbutton-black:hover
{
background: #2c2b2b;
}
.navbutton-black-bottom:hover
{
background: #2c2b2b;
}
#content
{
background-color: white;
width: 1024px;
float: left;
box-shadow: 0px 3px 20px #515050;
}
#rotating-item-wrapper
{
position: relative;
margin-left: 240px;
margin-top: 20px;
padding: 150px;
}
.rotating-item
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
#placeholderdiv
{
padding-left: 40px;
padding-top: 10px;
}
#slideshow
{
padding-left: 40px;
padding-top: 10px;
}
#video1
{
padding-left: 40px;
padding-top: 10px;
float: left;
}
.stats-offense
{
padding-left: 10px;
padding-top: 10px;
float: left;
}
#events1
{
padding-left: 40px;
padding-top: 10px;
float: left;
}
#rotating-item-wrapper-2
{
position: relative;
left: 455px;
top: 281px;
}
.rotating-item-2
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
#rotating-item-wrapper-3
{
position: relative;
left: 240px;
top: 532px;
padding: 300px;
}
.rotating-item-3
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
.stats-defense
{
position: relative;
left: 766px;
top: -68px;
overflow: auto;
padding-bottom: 206px;
}
#rotating-item-wrapper-4
{
position: relative;
left: 240px;
top: -260px;
padding: 35px;
}
.rotating-item-4
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
#footer-home
{
position: absolute;
bottom: -600px;
left: 0;
min-width: 100%;
height: 200px;
background-image: url(img/footerimg.png);
}
#footer-nav-menu-left
{
position: absolute;
left: 0px;
list-style-type: none;
margin-left: 430px;
}
#footer-nav-menu-right
{
position: absolute;
list-style-type: none;
margin-left: 550px;
}
.nav-button-footer
{
font-family: Calibri;
color: white;
text-decoration: none;
}
.nav-button-footer:hover
{
color: #c5c5c4;
}
#SocialMedia
{
font-family: Calibri;
color: white;
}
#Facebook-icon
{
}
#Twitter-icon
{
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="header"></div>
<div id="headerlogo"></div>
<ul id="header-nav-menu">
<li><a class="nav-button-header-menu-3" href="#RegisterLeague">Login</a></li>
<li><a class="nav-button-header-menu-2" href="#RegisterLeague">Join The
Club</a></li>
<li><a class="nav-button-header-menu-1" href="#RegisterLeague">Register
League</a></li>
</ul>
<div id="content">
<div id="main-nav-container">
<ul id="mainnav">
<li><a class="navbutton-red-top" href="#stats">STATS</a></li>
<li><a class="navbutton-red" href="#stats">EVENTS</a></li>
<li><a class="navbutton-red" href="#stats">FIND A LEAGUE</a></li>
<li><a class="navbutton-red" href="#stats">SCHEDULE</a></li>
<li><a class="navbutton-black" href="#stats">BECOME A REFEREE</a></li>
<li><a class="navbutton-black" href="#stats">REGISTER LEAGUE</a></li>
<li><a class="navbutton-black-bottom" href="#stats">JOIN THE CLUB</a>
</li>
</ul>
</div>
<div id="rotating-item-wrapper">
<img class="rotating-item" src="img/ContentArea1/AdOne/MainAd1.png" />
<img class="rotating-item" src="img/ContentArea1/AdOne/MainAd2.png" />
</div>
<div id="video1">
<img src="img/ContentArea1/Video/video1img.png" />
</div>
<div class="stats-offense">
<img src="img/ContentArea1/Stats/stats1img.png" />
</div>
<div id="events1">
<img src="img/ContentArea1/Events/events1.png" />
</div>
<div id="rotating-item-wrapper-2">
<img class="rotating-item-2" src="img/ContentArea1/AdTwo/Ad2Img.png" />
<img class="rotating-item-2" src="img/ContentArea1/AdTwo/Ad23Img.png" />
</div>
<div id="rotating-item-wrapper-3">
<img class="rotating-item-3" src="img/ContentArea1/AdThree/Ad3Img.png" />
<img class="rotating-item-3" src="img/ContentArea1/AdThree/Ad4Img.png" />
</div>
<div class="stats-defense">
<img src="img/ContentArea1/Events/events1.png" />
</div>
<div id="rotating-item-wrapper-4">
<img class="rotating-item-4" src="img/ContentArea1/VBanner/vbanner1img.png"
/>
<img class="rotating-item-4" src="img/ContentArea1/VBanner/vbanner2img.png"
/>
</div>
</div>
<div id="footer-home">
<ul id="footer-nav-menu-left">
<li><a class="nav-button-footer" href="#RegisterLeague">About</a></li>
<li><a class="nav-button-footer" href="#RegisterLeague">Contact Us</a></li>
<li><a class="nav-button-footer" href="#RegisterLeague">Press Inquiry</a>
</li>
</ul>
<ul id="footer-nav-menu-right">
<li><a class="nav-button-footer" href="#RegisterLeague">Terms of Use</a>
</li>
<li><a class="nav-button-footer" href="#RegisterLeague">Privacy Policy</a>
</li>
</ul>
<div id="SocialMedia">Follow Us</div>
<div id="Facebook-icon">
<img src="img/SocialMediaIcon/FB_icon.png" alt="Facebook" /></div>
<div id="Twitter-icon">
<img src="img/SocialMediaIcon/Twitter_icon.png" alt="Twitter" /></div>
<div id="Instagram-icon">
<img src="img/SocialMediaIcon/IG_icon.png" alt="Instagram" /></div>
<div id="YouTube-icon">
<img src="img/SocialMediaIcon/YouTube_icon.png" alt="YouTube" /></div>
</div>
</div>
</body>
</html>
Click the link below to see how it currently looks:
http://www.micre8tivegroup.com/default.html
As I was writing on the comments section, this is not a single thing issue. This is a problem with many things being done incorrectly. But mainly:
The structure of the page is poorly designed. I understand that this page is more of testing, but creating a web site is not directly getting into coding but analyzing and designing a solution. Coding may be the "fun part", but it's not the most important.
The positioning of the elements is incorrect. As a personal recommendation: avoid using position:absolute for controls. In your page, the logo is a good example of position absolute (although it could be done in other ways), all the rest absolute positioning shouldn't be there and breaks the page.
Here you have a link to a version the solves the position problems that you commented about: http://muzaw.com/test.html. Test it, and let me know if that's what you were aiming for (I know not everything will fit perfectly but that's just a matter of changing some values in the CSS).
The changes that I made:
Removed the position absolute for the header and footer (or changed to position:relative)
Restructured the page to fit a "more convenient" web page design.
Changed the CSS of some of the elements.
I understand you are learning, that I sound patronizing, and that my comments and answer may frustrate you; but if you start learning bad things from the beginning, it will be worse later.
I've found a way to do what you want, but the header and the footer will be the same width as your mainContainer.
Just change your CSS to :
#footer-home
{
position: absolute;
bottom: 0; /* Put it back to 0 */
left: 0;
min-width: 100%;
height: 200px;
background-image: url(img/footerimg.png);
}
#maincontainer
{
width: 1024px;
margin: 0 auto;
/* Add the code below */
left: 0;
right: 0;
position: absolute;
}
That way, the footer will always stay at the bottom.
The problem that i am facing is that text inside the a tag is not adjusting on a single line.
Here's my html.
<html>
<head>
<link rel="stylesheet" href="style5.css" type="text/css">
</head>
<body>
<div id="outer">
<ul>
<li class="current">Home</li>
<li>content</li>
<li>search</li>
<li>more</li>
</ul>
<div id="homepage">
Set as Homepage
</div>
<div id="clear">
</div>
</div>
<div id="wrapper">
<div id="pic">
<img src="logo.png">
<div id="content">
<p> Secure Search </p>
</div>
</div>
<div id="forms">
<form>
<input type="text" name="submit" size="70" style="font-size:20pt;"/>
</form>
<div id="pic_2">
<img src="powerd-by-google.png">
</div>
</div>
<div id="footer">
© 2012 - We Respect your Privacy - About AVG Secure Search
</div>
</div>
</body>
</html>
and here's my css.
body
{
margin: 0;
padding: 0;
background-color: white;
}
h1,h2,h3
{
margin: 0;
padding: 0;
}
p,ul,ol,li
{
margin: 0;
padding: 0;
}
#outer
{
background-color: rgb(67,68,71);
}
#outer ul
{
list-style: none;
margin-left: 5px;
border-left: 1px solid;
}
#outer li
{
float: left;
}
.current
{
background-color: rgb(56,63,137);
}
#outer a
{
width: 90px;
display: block;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-weight: bold;
color: white;
border-right: 1px solid;
padding: 5px;
}
#outer a:hover
{
color: black;
background-color: white;
}
#outer .current a:hover
{
color: white;
background-color: inherit;
}
#homepage a
{
float: right;
font-weight: none;
color: white;
background-color: rgb(67,68,71);
display: inline;
text-transform: lowercase;
border-right: none;
}
#homepage a:hover
{
color: white;
background-color: inherit;
}
#clear
{
clear: both;
}
#wrapper
{
width: 960px;
margin: 0 auto;
overflow: auto;
}
#pic
{
margin-top: 100px;
margin-left: 389px;
position: relative;
}
#content
{
position: absolute;
top: 60px;
left: 90px;
}
#forms
{
margin-top: 50px;
position: relative;
}
#pic_2
{
position: absolute;
top: 0px;
left: 867px;
}
#footer
{
width: 500px;
margin: 375px auto 0px;
}
#footer a
{
text-decoration: none;
}
now the problem is with the a tag in the homepage div, i have tried very hard but i have no idea why its text is not adjusting on a single line instead it seems to creep up on multiple lines.
Any suggestions in this matter would be really helpful.
thank you.
I'm assuming you're talking about the 'set as homepage' button.
If so, The issue is that your css is writing a fixed with to the element inherited from #outer a which is making that element 90px wide.
You can fix this by simply adding the css style width: inherit; to #homepage a
Example:
http://jsfiddle.net/2jByx/1/
You need to add width to the "set as homepage" element
#homepage a {
.....
width: 120px; //added width
}
Take a look at here, http://jsfiddle.net/VkmHr/
is that you looking for?