On my site, matprichardson.co.uk, when you click the 'help' button in the dialog in the center of the screen, another dialog pops up containing some content.
For some reason, when this happens, the first two lines of the first paragraph element are strangely indented, as well as the header, which is normally centered.
I've looked at my markup and css a number of times now and I'm really struggling to see why this is happening. Could somebody please point me in the right direction?
CSS
body {
margin: 0;
padding: 0;
}
#maincontainer {
font-family: arial;
margin-bottom: 20px;
}
.dialog {
border: 5px solid black;
display: inline-block;
background-color: white;
}
.dialog p, .dialog ul {
font-family: "Courier New";
font-size: 12px;
}
.dialogtitle h2 {
margin: 0;
padding: 1px 0;
font-family: "courier new";
font-size: 12px;
background-color: black;
color: white;
text-align: center;
}
.dialogtitle {
cursor: move;
}
.dialogcontent {
margin: 10px;
}
.windowsbutton{
width: 70px;
height: 22px;
font-family: "courier new";
font-weight: bold;
font-size: 12px;
border-width:2px;
border-top: 2px solid white;
border-left: 2px solid white;
}
.buttonsurround {
border: 1px solid black;
max-width: 70px;
border-radius:3px;
display: inline-block;
margin: 0 10px;
}
.buttonselected {
border-width: 2px;
}
.windowsbutton:focus {
outline: none;
}
#maindialog {
position: absolute;
top: 220px;
left: 50%;
margin-left: -150px;
}
#helpdialog {
display: none;
width: 500px;
top: 70px;
left: 110px;
}
#helpClose {
margin:0 200px;
}
/*Menu*/
#menu {
margin: 0 0 20px 0;
padding: 0;
height: 30px;
background-color: black;
width: 100%;
}
/*Icons*/
.iconcontainer {
width: 80px;
float: left;
}
.iconcontainer:hover {
cursor:pointer;
}
.foldericon {
height: 40px;
width: 40px;
border: 2px solid black;
border-radius: 0 0 10px 0;
text-align: center;
margin: 0 auto;
background-color: white;
}
.iconhead {
height: 10px;
border-bottom: 2px solid black;
background-color:black;
}
.foldertext {
margin-top: 5px;
}
.iconcontainer h1 {
font-family: "Courier New";
font-size: 12px;
text-align: center;
margin: 0;
padding: 0;
}
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mat Richardson</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="maincontainer">
<div id="menu">
</div>
<!--an icon. Lovely, isn't it?-->
<div class="iconcontainer" id="blog">
<div class="foldericon">
<div class="iconhead">
</div>
<div class="iconmain">
</div>
</div>
<div class="foldertext">
<h1>blog</h1>
</div>
</div>
<div class="iconcontainer" id="pictures">
<div class="foldericon">
<div class="iconhead">
</div>
<div class="iconmain">
</div>
</div>
<div class="foldertext">
<h1>pics</h1>
</div>
</div>
<div class="iconcontainer" id="websites">
<div class="foldericon">
<div class="iconhead">
</div>
<div class="iconmain">
</div>
</div>
<div class="foldertext">
<h1>websites</h1>
</div>
</div>
<div id="maindialog" class="dialog">
<div class="dialogtitle">
<h2>Welcome to matprichardson.co.uk</h2>
</div>
<div class="dialogcontent">
<div class="buttonsurround buttonselected"><input type="button" id="mainOK" value="OK" class="windowsbutton" /></div>
<div class="buttonsurround"><input type="button" value="Cancel" id="mainCancel" class="windowsbutton" /></div>
<div class="buttonsurround"><input type="button" value="H̲elp" id="mainHelp" class="windowsbutton" /></div>
</div>
</div>
<div id="helpdialog" class="dialog">
<div class="dialogtitle">
<h2>Help</h2>
</div>
<div class="dialogcontent">
<p>Welcome to the personal site of Mat Richardson. There's not much to see right now,
but do feel free to have a click about.</p>
<p>Some links you might want to visit (or not, your choice):</p>
<ul>
<li>2toria (another site I own)</li>
<li>My Codepen Profile</li>
<li>My StackOverflow Profile</li>
<li>My twitter account</li>
<li>My LinkedIn Profile</li>
</ul>
<div id="helpClose" class="buttonsurround buttonselected"><input type="button" value="Close" class="windowsbutton" /></div>
</div>
</div>
</div>
</body>
</html>
It's because the position property for your blog, websites,and pics divs is set to relative and therefore it's taking up space. Change it so that they're set to absolute, and the text on your help dialog goes back to normal.
You could add something like:
#blog, #pictures, #websites {
position:absolute;
}
#blog {
left:20px;
}
#pictures {
left:80px;
}
#websites {
left:140px;
}
jsFiddle example
As I noted in my comment:
This is because the dialog is positioned relatively and it is still in
document normal flow. Therefore the content wraps the floated icons
which are at the left-top of the page.
Positioning the dialog box absolutely will fix the problem.
Alternatively, you can add clear: both declaration to the dialog element in order for clearing the floats. Thus the content of relative positioned dialog won't wrap the floated icons anymore.
Related
HTML
<body>
<div class="header">
<div class="header-logo"><u>MMH</u></div>
<div class="header-inner">Miami Max Hydro</div>
<nav class="header-nav">
About
Contact
</nav>
</div>
<div class="homepage">
<div class="content">
<div class="images">
<div class="column">
<div class="profile-large">
<div class="column1">
<div class="profile-overlay">
<div class="column1">
<img src=data:image/jpeg;base64,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 />
<div class="column2">
<p>Cell2</p>
</div>
<div class="column3">
<p>Cell3</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
body {
background-image: url(http://weknowyourdreamz.com/images/sea/sea-08.jpg);
background-size: cover;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
back
}
.header {
text-align: center;
padding: 10px;
background: #D2F0C6;
overflow: auto;
position: fixed;
top: 1px;
right: 1px;
left: 1px;
border: 6px solid #80bc80;
}
.header-inner {
Margin-top: 10px;
}
.images {
padding: 20px;
}
.header-inner a {
text-decoration: none;
color: #000000;
font-size: 24px;
font-weight: bold;
line-height: 20px;
}
.header-logo {
font-size: 32px;
Font-weight: bold;
line-height: 28px;
}
.header-logo a {
text-decoration: none;
color: #000000;
}
.header-nav a {
text-decoration: none;
color: #295f6f;
margin-right: 5px;
margin-left: 5px;
line-height: 25px;
font-weight: bold;
}
.header-nav {
margin-right: 5px;
margin-left: 5px;
}
..images {
padding: 20px 0;
}
.column {
width: 33%;
height: 33%;
font-weight: bold;
line-height: 30;
float: left;
text-align: center;
}
.profile-overlay {
float: left;
border: 6px solid #80bc80;
width: 255px;
height: 245px;
}
My Issue:
Basically, No matter what I do to get a border around my image, I get
Basically the top border extends behind the header.
I've tried margin-top with no success, it just keeps the picture in the same spot relative to the border while pushing the top of the border down.
line-height won't work either. Even line-height 1 will instantly make the picture match the top border but go away from the bottom and hide under the header.
I do have an idea in mind, doing line-height 1 then doing some command to move the whole border/picture down relative to the body, but I don't know any code that does that.
JSFiddle.
Remove border: 6px solid #80bc80; for .profile-overlay and add it to .column1 img.
.column1 img {
border: 6px solid #80bc80;
}
HTML & CSS question: For this assignment we are not supposed to use floats, but instead only use block, inline-block, and inline. Even though I have set the side-bar div to inline block, and the main-content div to inline-block, and the width less then the wrapper width, It is not aligning left and right. Can anyone please help me understand what I need to fix.
I know this is a lot of code to put in here, but I am not sure what I need to put in, and what I don't. I looked around and tried to find an answer but if this question has already been asked and solved please reference me. Thanks.
Google drive of the html and css (sorry to have to send the whole file, I was not sure what it was so I decided to attach the whole html and css file.)
Try this
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Word Stream</title>
<meta name="description" content="Pay per click search marketing software offers a means for accomplishing two core requirments for PPC optimization"/>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<!-- Header (Logo and Nav) -->
<div id="header">
<div id="nav">
<ul>
<li>Products</li>
<li>|</li>
<li>Products</li>
<li>|</li>
<li>Blog</li>
<li>|</li>
<li>Support</li>
<li>|</li>
<li>AdWords Grader</li>
</ul>
<form id ="login">
<label>
<button class="button" type="button">Login</button>
</label>
</form>
</div>
<div id="logo">
<img src="logo.png" alt="Logo">
<span id="word">Word</span>
<span id="stream">Stream</span>
</div>
</div>
<!-- Main content section -->
<div id="main-page">
<div id="banner">
<h1>WordStream Internet Marketing Software</h1>
</div>
<!-- main side of page -->
<!-- Side bar (info and Advertisment) -->
<div id="side-bar">
<div id="side-bar-content">
<h1>Wordstream for PPC</h1>
<h2>Drive More Profits Through PPC!</h2>
<p>Get Started with <span class="blue">Wordstream</span>'s Powerful PPC Platform Today</p>
<form>
<label>
<button class="button1" type="button">SCHEDULE DEMO</button>
</label>
<label>
<button class="button2" type="button">FREE TRIAL</button>
</label>
</form>
<p class="center">(No Credit Card Required)</p>
</div>
<!-- side bar ad -->
<div id="side-bar-ad">
<div id="wrap-img-text">
<h3>How does your adWords performance measure up?</h3>
<p>Get a free, instant report with the WordStream Adwords Performance Grader</p>
<form>
<label>
<button class="graded" type="button">Get Graded Today</button>
</label>
</form>
</div>
<img class="img" src="left_content_ad1.png" alt="Oops, your browser isn't showing this image.">
</div>
</div>
<div id="handle">
<div id="upper-bar">
<img class="inline" src="home_button.png" alt="home">
<span class="blue">PPC</span>
<!-- contact info and phone pic -->
<div id="contact" class="inline">
<img class="inline phone" src="phone.png" alt="phone">
<!-- text only -->
<div class="inline">
<p class="top">
<span class="hours">Mon - Fri 9 a.m. - 5 p.m. (EST)</span>
<br>
<span class="number">855.967.3787</span>
<br>
<span class="int-number">International: +1.617.963.0555</span>
</p>
</div>
</div>
</div><br/>
<!-- main content starts here -->
<div id="main-content">
<h1>PPC - Achieve More Efficiant Pay-Per CLick (PPC) Marketing</h1>
<p><span class="bold">PPC</span>(pay-per click) search marketing software offers a means for accomplishing two core requirements for PPC optimization:</p>
<ul>
<li>
<span class="bold">PPC Automation</span>-While it would be impossible (and inadvisable!) to automate every aspect of pay-per-click advertising, automating away redundant, time-consuming tasks affords you a means of increasing productivity. Often, this means being able to produce an amount of work that would otherwise have been unachievable for you and your business.
</li>
<li>
<span class="bold">PPC Management</span>-PPC management refers to the maintenance and prioritizing of paid seach marketing tasks. Being able to oversee various aspects of your account while assigning each item on a seemingly endless to-do list an appropriate value can make or break an online ad campaign.
</li>
</ul>
<p>
WordStream's PPC software is specifically designed to aid in these two PPC search engine marketing areas. This page will show you both the processes the software is automating for you, and the best course of action to take where workflow is concerned.
</p>
<!-- Bordered *Trial* box with logo and button -->
<div id="trial-box">
<img src="content_ad.png" alt="ad">
<div class="text-button">
<h3>Drive More Profits Through PPC - Try Our Platform FREE</h3>
<p>Get instant access to WordStream's innovative <span class="bold"> Quality Score</span> and <span class="bold">Account Management</span> tools through our <span class="bold"> FREE 7-day Trial</span>. Risk Free, No Credit Card Required and No Automatic Signups.</p>
<form>
<label>
<button class="get-started" type="button">Get Started Today!</button>
</label>
</form>
</div>
</div>
<!-- under the trial box -->
<h2>Automation And Your PPC Search Campaign</h2>
<p>Another two lines of text that I really dont feel like copying. Soooo much text to copy, not worth it. Im just writing this instead to fill in the space.</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0px;
padding: 0px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#wrapper{
width: 1000px;
margin: 0px auto;
}
/*HEader things*/
#header{
width: auto;
position: relative;
height: 100px;
}
#logo{
display: block;
text-align: left;
position: absolute;
bottom: 0px;
}
#logo img{
vertical-align: text-bottom;
width: 50px;
}
#word{
color: grey;
font-family: Tahoma, Geneva, sans-serif;
font-size: 35px;
}
#stream{
color: blue;
font-family: Tahoma, Geneva, sans-serif;
font-size: 35px;
}
#nav{
display: block;
margin: 10px 30px;
position: absolute;
right: 0px;
}
#nav ul{
display: inline-block;
background-color: #F0F0F0;
border-radius: 5px;
padding: 0px 10px 5px;
padding-bottom: 7px;
}
#nav li{
display: inline-block;
font-size: 12px;
vertical-align: middle;
}
#login{
display: inline-block;
margin-left: 20px;
}
.button{
width: 60px;
height: 25px;
background-color: blue;
border-radius: 5px;
border: 0px;
color: white;
}
/*Banner right under header*/
#banner{
background-color: blue;
padding: 5px 10px;
margin: 15px 0px;
font-size: 10px;
box-shadow: 0px 50px 200px grey;
}
#banner h1{
color: white
}
/*sidebar*/
#side-bar{
display: inline-block;
width: 220px;
}
#side-bar-content{
border-bottom: 1px solid lightgrey;
margin-bottom: 10px;
padding-bottom: 10px;
}
#side-bar h1{
font-size: 15px;
color: blue;
}
#side-bar h2{
font-size: 12px;
color: darkred;
}
#side-bar p{
font-size: 11px;
}
.button1{
border: 0px;
background-color: blue;
color: white;
width: 220px;
padding: 3px 0px;
margin-bottom: 3px;
border-radius: 5px;
}
.button2{
border: 0px;
background-color: orange;
color: white;
width: 220px;
padding: 3px 0px;
border-radius: 5px;
}
.center{
text-align: center;
}
/*Bottom half of sidebar*/
#side-bar-ad{
position: relative;
}
#wrap-img-text{
position: absolute;
left: 0px;
top: 0px;
padding: 10px;
}
#wrap-img-text h3{
font-size: 15px;
padding: 5px;
color: blue;
}
#wrap-img-text p{
padding: 3px;
}
.graded{
width: 180px;
background-color: darkblue;
color: white;
border-radius: 10px;
margin: 5px;
}
.img{
width: 210px;
height: auto;
}
.blue {
color: blue;
}
#handle{
vertical-align: top; display: inline-block;
}
/*Under the panel (phone number etc)*/
#upper-bar{
display: inline-block;
vertical-align: top;
position: relative;
width: 720px;
height: 110px;
border-bottom: 1px solid lightgrey;
}
#upperbar hr{
position: absolute;
bottom: 0px;
}
.inline{
display: inline-block;
vertical-align: top;
}
#contact{
position: absolute;
height: 110px;
right: 0px;
top: 0px;
}
.phone{
height: 70%;
width: auto;
}
.number{
color: blue;
font-family: Impact, Charcoal, sans-serif;
font-size: 45px;
}
.int-number{
font-size: 15px;
}
/*main content section*/
#main-content{
display: inline-block;
width: 700px;
vertical-align: top;
}
#main-content li{
list-style-type: square;
margin-left: 20px;
margin-bottom: 5px
}
#main-content h1{
font-size: 23px;
color: blue;
margin-bottom: 5px;
margin-top: 15px;
}
#main-content p{
margin-bottom: 5px;
margin-top: 15px;
}
.bold{
font-weight: bold;
}
#trial-box{
border: 5px solid blue;
padding: 10px;
}
#trial-box img{
display: inline-block;
vertical-align: top;
}
.text-button{
display: inline-block;
width: 600px;
vertical-align: top;
}
h3{
color: blue;
}
.get-started{
background-color: limegreen;
color: white;
border-radius: 5px;
border: 0px;
width: 150px;
padding: 5px;
}
h2{
color: blue;
font-size: 17px;
margin-top: 10px;
}
Output:
Check out this Fiddle
EDIT:
Q:Why the code didn't work before?
A:
I have been trying to add three icons for like 6 hours and nothing works can someone please help :(
Want the icon to show up above "Performance", "Technology", and "Design".
In addition I wanted to add quote icons to the <p> tags inside the three div's.
Also wanted to change the color of the icons to match the hr tag with the same hue of red.
Here is my HTML
<html>
<header>
<title>NavBar</title>
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</header>
<body>
<div id="menu wrapper" class="red">
<div class="left"></div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
<li class="login"><a class="login" href="#">Log In</a></li>
</ul>
</div>
<div class="header">
<img class="head-image" src="banner2.jpg">
</div>
<div class="hr">
<hr />
</div>
<div class="content">
<div class="container">
<div class="icon1">
<i class="fa fa-rocket fa-5x"></i>
<h2>Performance</h2>
<hr class="ptd" />
<p>Best in class when it comes to raw power!</p>
</div>
<div class="icon2">
<i class="fa fa-power-off fa-5x"></i>
<h2>Technology</h2>
<hr class="ptd" />
<p>Oringinal Innovations pushing the boundaries of modern technology</p>
</div>
<div class="icon3">
<i class="fa fa-laptop fa-5x"></i></a>
<h2>Design</h2>
<hr class="ptd" />
<p>Designed with you in mind</p>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
Here is my CSS
body {
background-image: url(black-Linen.png);
}
/* NavBar */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #800000;
font-size: 13px;
height: 40px;
border-bottom: 2px solid #5A0000;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #FFF;
}
#menu li a:hover {
background-color: #CC0000;
border-bottom: 2px solid #DDD;
color: #000;
}
#menu_wrapper ul {
margin-left: 12px;
}
#menu_wrapper {
padding: 0 16px 0 0;
background-color: #666666;
}
#menu_wrapper div {
float: left;
height: 44px;
width: 12px;
background-color: #666666;
}
.header {
height: 720px;
width: 1600px;
margin: 0 auto 0 auto;
padding: 10px 10px 20px 10px;
overflow: hidden;
}
.head-image {
height: 720px;
width: 1600px;
box-shadow: 5px 5px 3px #000;
}
div.hr {
height: 32px;
background: url(fire.png) no-repeat scroll center;
}
div.hr hr {
display: none;
}
.content {
width:1600px;
height: 250px;
margin: 25px auto 15px auto;
padding: 10px;
}
/*Performance*/
.icon1 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
.container i {
display: block;
margin: 10px auto 0 auto;
width: 32px;
color: #800000;
border-radius:50%;
}
/*Technology*/
.icon2 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: 42px;
margin-left: 42px;
}
/*Design*/
.icon3 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
h2 {
text-align: center;
font-weight: bold;
font-family: roboto, sans-serif;
margin-top: 2px;
}
h2 a {
text-decoration: none;
color: #FFF;
}
h2 a:hover, a:active {
color: #9f1111;
}
.ptd {
width: 40%;
}
p {
text-align: center;
font-style: italic;
font-family: roboto, sans-serif;
color: #FFF;
}
I think it's actually working fine, I can see icons in my JS Fiddle.
Could the problem be your link to your CSS file? Should there be a space within the href?
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
http://jsfiddle.net/Delorian/1x6u553h/
Start by double checking your markup. You have two IDs "menu" + "wrapper" and one selector "#menu_wrapper". I think you should keep IDs just for actions and add classes to add style.
Your markup:
<div id="menu wrapper" class="red">
...
</div>
Correct markup:
<div id="menu" class="wrapper red">
...
</div>
You are missing the protocol http:// on your link to the bootstrap CDN.
Try to add it to the link and see if it works:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
I am having a very weird html problem. My main menu is not in its place.
<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="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="78" style="font-size:20pt;"/>
</form>
</div>
</div>
</body>
</html>
and here's the 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;
}
#clear {
clear: both;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
#pic {
margin-top: 100px;
margin-left: 389px;
position: relative;
}
#content {
position: absolute;
top: 60px;
left: 90px;
}
#forms {
margin-top: 50px;
}
Now you may ask that how come i didn't noticed my menu not in placing during early stages of coding. Well the thing is that i was using borders on wrapper div during coding and everything was in place however as soon as i removed the border the whole thing fell apart.
I think it has something to do with the float not being cleared correctly resulting in pic div messing everything up. I would be really appreciative for your suggestions.
Thank you.
I don't know what you mean by "not in its place", but removing a border suggest you have a problem with collapsing margins.
If that's the case, you could solve it by adding overflow: auto or padding: 1px 0 to the rule where you removed the border.
Replace your
<div id="clear"></div>
with
<br id="clear">
or even better change it from and id to a class. That way you can use it multiple times.
For some reason it doesn't work with the div. But the "br" also shorter so I'd prefer that anyway.
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?