I have tabs and i have some div, when i click the tabs the particular div should be shown.
but when i click the tab, multiple div are shown at a same time. How to show only one div when i click one tab?
here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="ie-test">
<ul class="group" id="boxLinks">
<li>Description</li>
<li>Audience</li>
<li>Objectives</li>
<li>Prerequisites</li>
<li>Duration</li>
</ul>
<div id="box">
<br>
<div class="box" id="box1">1</div>
<div class="box" id="box2">Another box!</div>
<div class="box" id="box3">Woot!</div>
<div class="box" id="box4">Another box!</div>
<div class="box" id="box5">Anotheasfr box!</div>
<br>
</div>
</div>
</body>
</html>
css
#ie-test {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
#boxLinks {
list-style: none outside none;
overflow: hidden;
margin: 0;
padding: 0;
}
#boxLinks li {
display: inline;
}
#boxLinks li a {
border: 1px solid #CCCCCC;
color: black;
display: block;
float: left;
left: 1px;
margin-left: -1px;
padding: 5px 10px;
position: relative;
text-decoration: none;
}
#boxLinks li a:hover {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
}
#box {
border: 1px solid #CCCCCC;
height: 522px;
overflow: hidden;
padding: 0 30px;
position: relative;
top: -1px;
width: 90%;
}
.box {
display: block;
height: 250px;
position: relative;
}
#box1:target, #box2:target, #box3:target {
display: block;
height:auto;
}
try jquery tabs or if u want only in css use this one.
.box {
display: none;
height: 250px;
position: relative;
}
#box1:target, #box2:target, #box3:target, #box4:target, #box4:target {
display: block;
height:auto;
}
you can use jqueryui tab:its easy to use and nice .
Checkout the following JSFIDDLE:
$('ul.group > li > a').click(function(event){
$('div.box').each(function(){$(this).css('display', 'none');});
$('div'+$(this).attr('href')).css('display', 'block');
});
$('ul.group > li > a[href=#box1]').click();
You can use jquery .
below is working code which is using jquery.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#ie-test {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
#boxLinks {
list-style: none outside none;
overflow: hidden;
margin: 0;
padding: 0;
}
#boxLinks li {
display: inline;
}
#boxLinks li a {
border: 1px solid #CCCCCC;
color: black;
display: block;
float: left;
left: 1px;
margin-left: -1px;
padding: 5px 10px;
position: relative;
text-decoration: none;
}
#boxLinks li a:hover {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
}
#box {
border: 1px solid #CCCCCC;
height: 522px;
overflow: hidden;
padding: 0 30px;
position: relative;
top: -1px;
width: 90%;
}
.box {
display: block;
height: 250px;
position: relative;
}
#box1:target {
display: block;
height:auto;
background-color:red;
}
#box2:target {
display: block;
height:auto;
background-color:red;
}
#box3:target {
display: block;
height:auto;
background-color:red;
}
#box4:target {
display: block;
height:auto;
background-color:red;
}
#box5:target {
display: block;
height:auto;
background-color:red;
}
</style>
<script type="text/javascript" src="jquery-2.0.3.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$(".box").each(function()
{
$(this).css("display","none");
});
});
function Show(boxName)
{
$('.box').css("display","none");
$('#'+boxName).css("display","block");
}
</script>
</head>
<body>
<div id="ie-test">
<ul class="group" id="boxLinks">
<li>Description</li>
<li>Audience</li>
<li>Objectives</li>
<li>Prerequisites</li>
<li>Duration</li>
</ul>
<div id="box">
<br>
<div class="box" id="box1">1</div>
<div class="box" id="box2">Another box!</div>
<div class="box" id="box3">Woot!</div>
<div class="box" id="box4">Another box!</div>
<div class="box" id="box5">Anotheasfr box!</div>
<br>
</div>
</div>
</body>
</html>
Related
I'm making a hamburger menu right now with html and css (no js), and the :checked + .something does not work. I'm searching for solutions for about 3 hours but i can't find any. If you would help me that would be nice.
Maybe I messed up somewhere because i watched it from a video, but i did the exact same thing like him but i doesn't work :(
Here is the code:
* {
margin: 0;
padding: 0;
}
body {
background-color: teal;
}
.navigations {
right: 0;
z-index: 10;
display: block;
position: fixed;
top: 15px;
padding-bottom: 20px;
padding-left: 25px;
padding-right: 150px;
border-radius: 50px 10px 10px 50px;
background: rgba(0, 0, 0, 0.5);
}
.navigations div {
display: inline-block;
font-size: 25px;
}
.navigations a {
text-decoration: none;
color: white;
}
.burger {
z-index: 100;
position: fixed;
right: 25px;
display: block;
top: 25px;
cursor: pointer;
}
.burger div {
width: 45px;
height: 5px;
background-color: white;
margin: 12px;
border-radius: 10px;
}
#toggle {
display: none;
position: fixed;
}
#toggle:checked+.navigations {
display: none;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<link rel="stylesheet" type="text/css" href="something.css">
</head>
<body>
<div class="navigations">
<div class="nav">
About us
</div>
<div class="nav">
Tours
</div>
<div class="nav">
Contacts
</div>
</div>
<label for="toggle">
<div class="burger">
<div class="burgerelem"></div>
<div class="burgerelem"></div>
<div class="burgerelem"></div>
</div>
</label>
</body>
</html>
It seems like you're actually missing the checkbox element. Since you're using the adjacent sibling selector, (+ in #toggle:checked + .navigations) you should put the checkbox with the .navigations div immediately before the #toggle input.
* {
margin: 0;
padding: 0;
}
body {
background-color: teal;
}
.navigations {
right: 0;
z-index: 10;
display: block;
position: fixed;
top: 15px;
padding-bottom: 20px;
padding-left: 25px;
padding-right: 150px;
border-radius: 50px 10px 10px 50px;
background: rgba(0, 0, 0, 0.5);
}
.navigations div {
display: inline-block;
font-size: 25px;
}
.navigations a {
text-decoration: none;
color: white;
}
.burger {
z-index: 100;
position: fixed;
right: 25px;
display: block;
top: 25px;
cursor: pointer;
}
.burger div {
width: 45px;
height: 5px;
background-color: white;
margin: 12px;
border-radius: 10px;
}
#toggle {
display: none;
position: fixed;
}
/*
Since the .navigations is the next sibling element after #toggle,
the + selector works here
*/
#toggle:checked+.navigations {
display: none;
}
<input type="checkbox" id="toggle" /> <!-- Add this! -->
<div class="navigations">
<div class="nav">
About us
</div>
<div class="nav">
Tours
</div>
<div class="nav">
Contacts
</div>
</div>
<label for="toggle">
<div class="burger">
<div class="burgerelem"></div>
<div class="burgerelem"></div>
<div class="burgerelem"></div>
</div>
</label>
So i made a Watchlist which is actually just a picture gallery and a menu right now. but on the second, the bigger screen the pictures are overlaying my menu.
https://imgur.com/a/FUycbCo
well i think that its because i used px instead of % or smth like that so i tried changing it but the problem is finding out where. some of the tags dont even work with % for some reason. also im not even sure that thats the problem. thats just a guess from me.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>HTML</title>
</head>
<body>
<div class="menu">
<button class="untermenu">TV</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
<button class="untermenu">Anime</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/A121lm-WoYL._AC_UY218_.jpg" alt="Shadowhunters">
<div class="desc"><p>Staffel 2/3<br>Folge 20/20<br>am schauen</p></div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/81b+18Wg5dL._AC_UY218_.jpg" alt="Brooklyn Nine Nine">
<div class="desc"><p>Staffel 5/6<br>Folge 22/22<br>am schauen</p></div>
<script>
var untermenu = document.getElementsByClassName("untermenu");
var i;
for (i = 0; i < untermenu.length; i++)
{
untermenu[i].addEventListener("click", function()
{
this.classList.toggle("active");
var untermenuContent = this.nextElementSibling;
if (untermenuContent.style.display === "block")
{
untermenuContent.style.display = "none";
}
else
{
untermenuContent.style.display = "block";
}
});
}
</script>
</body>
</html>
CSS:
body
{
background-color: #e2e2e0;
}
h1
{
font-family: Arial, "Times new roman";
position: relative;
left: 170px;
}
.menu
{
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 50px;
}
.menu a, .untermenu
{
padding: 8px 15px 10px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
cursor: pointer;
}
div.gallery
{
position: relative;
left: 9%;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 230px;
}
div.gallery:hover
{
border: 1px solid #777;
}
div.gallery img
{
width: 100%;
height: 10em;
}
div.desc
{
padding: 15px;
text-align: center;
background-color: white;
}
p
{
padding: 0;
margin: 0;
line-height: 1.5;
}
.menu a:hover, .untermenu:hover
{
color: #f1f1f1;
}
.untermenu-links
{
display: none;
background-color: #262626;
}
.active
{
background-color: #093802;
color: white;
}
#kleiner
{
font-size: 15px;
}
i expect it to look nice
it doesnt look nice.
I would suggest you to post the whole HTML and CSS somewhere here or maybe on share a codepen, so that we can debug your code.
Also, I would suggest you to use grid and flex for making layouts for your website. For example I can see that your design structure can we implemented using basic grid and flex . The implementation in your case would be basic and it would be a good start for you. Consider learning them.
I have made changes in your code, added flex and grid. I have also implimented a responsiveness code, so that if the screen size reduces things still look good.
https://codepen.io/bhanusinghR/pen/LYPbazK?editors=1100
Code used:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>HTML</title>
</head>
<body>
<div class="body-wrapper">
<div class="menu">
<button class="untermenu">TV</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
<button class="untermenu">Anime</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
</div>
<div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/A121lm-WoYL._AC_UY218_.jpg" alt="Shadowhunters">
<div class="desc"><p>Staffel 2/3<br>Folge 20/20<br>am schauen</p></div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/81b+18Wg5dL._AC_UY218_.jpg" alt="Brooklyn Nine Nine">
<div class="desc"><p>Staffel 5/6<br>Folge 22/22<br>am schauen</p></div>
</div>
</div>
CSS
body
{
background-color: #e2e2e0;
padding:0px;
margin:0px;
}
.body-wrapper{
display: grid;
grid-template-columns: 18% auto;
grid-template-rows:auto;
}
h1
{
font-family: Arial, "Times new roman";
position: relative;
left: 170px;
}
.menu
{
min-width: 100%;
top: 0;
left: 0;
background-color: #111;
padding-top: 50px;
height: 100vh;
}
.menu a, .untermenu
{
padding: 8px 15px 10px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
cursor: pointer;
}
div.gallery
{
position: relative;
left: 9%;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 230px;
}
div.gallery:hover
{
border: 1px solid #777;
}
div.gallery img
{
width: 100%;
height: 10em;
}
div.desc
{
padding: 15px;
text-align: center;
background-color: white;
}
p
{
padding: 0;
margin: 0;
line-height: 1.5;
}
.menu a:hover, .untermenu:hover
{
color: #f1f1f1;
}
.untermenu-links
{
display: none;
background-color: #262626;
}
.active
{
background-color: #093802;
color: white;
}
#kleiner
{
font-size: 15px;
}
#media only screen and (max-width: 600px) {
.body-wrapper {
display: flex;
flex-direction: column;
}
.menu {
height:100%;
padding-top: 0px;
display: flex;
}
}
I have created your layout using basic simple use of grid and flex.
I have a project for a photography site. I am fairly new so still struggling with some of the basics. My project will have a header, a main div where the photos will be displayed and a footer. I want my main div to fill as much space as possible with the footer right at the bottom (as you'd expect). But this is what I am getting:
I have provisionally set the background-color of the header and footer to yellow, the color of the main div to red and the body is set to green. This is to better solve the issue. What I want is no green and the footer to be right at the bottom, with the rest being red, no matter the size of the window.
Here is my code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="JavaScript2b.js"></script>
<script type="text/javascript" src="JavaScript2.js"></script>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
</head>
<body>
<div id="header">
</div>
<div id="wrap">
<div id="container">
<div id="controllers">
<div id="previous" class="buttons">
<p id="try" onclick="change(-1);">PREVIOUS</p>
</div>
<div id="next" class="buttons">
<p id="try2" onclick="change(1);">NEXT</p>
</div>
</div>
<div id="imagewrap">
<img src="Images/01PARANA/Image1.jpg" height="100%" id="front" />
</div>
<div>
<p id="tag">Text</p>
</div>
</div>
</div>
<div id="footer">
</div>
<script type="text/javascript" src="JavaScript2.js"></script>
</body>
</html>
css
#font-face {font-family: Eagle-Light;
src: url("Eagle-Light.otf") format("opentype");
}
#font-face {font-family: Raleway Light;
src: url("Raleway Light.otf") format("opentype");
}
body {
/* height: 100%;*/
background-color: green;
}
#header {
height: 100px;
width: 100%;
background-color: yellow;
}
#footer {
height: 100px;
width: 100%;
background-color: yellow;
}
p {
color: #818181;
font-family: Eagle-Light;
line-height: 1.7em;
padding: 0px;
margin: 0px;
font-size: 0.5em;
letter-spacing: 0.21em;
}
a:link {
text-decoration: none;
color: inherit;
}
a:visited {
text-decoration: none;
color: inherit;
}
div {
margin: 0px;
padding: 0px;
}
#wrap {
clear: both;
padding: 0px;
width: 100%;
background-color: red;
}
body {
margin: 0px;
padding: 0px;
}
#container {
min-width: auto;
position: relative;
/* height: 77%;*/
width: 550px;
margin: 0 auto;
/* margin-top:7%;*/
}
#controllers {
position: static;
height: 20px;
}
#previous {
position: absolute;
left: 0px;
}
#next {
position: absolute;
right: 0px;
}
#tag {
position: static;
height: 20px;
line-height: 1.7em;
padding-top: 5px;
}
.buttons {
cursor: pointer;
}
#imagewrap{
border: 1px solid #818181;
overflow: hidden;
z-index: 2;
background-color: red;
}
#front {
display: block;
}
Thank you,
David
The problem is that your main div takes up very little space and therefore the body extends to cover the screen. In this case you could fix the footer always in the lowest position
#font-face {font-family: Eagle-Light;
src: url("Eagle-Light.otf") format("opentype");
}
#font-face {font-family: Raleway Light;
src: url("Raleway Light.otf") format("opentype");
}
body {
/* height: 100%;*/
background-color: green;
}
#header {
height: 100px;
width: 100%;
background-color: yellow;
}
#footer {
position: absolute;
height: 100px;
width: 100%;
background-color: yellow;
display: block;
bottom: 0;
}
p {
color: #818181;
font-family: Eagle-Light;
line-height: 1.7em;
padding: 0px;
margin: 0px;
font-size: 0.5em;
letter-spacing: 0.21em;
}
a:link {
text-decoration: none;
color: inherit;
}
a:visited {
text-decoration: none;
color: inherit;
}
div {
margin: 0px;
padding: 0px;
}
#wrap {
clear: both;
padding: 0px;
width: 100%;
background-color: red;
}
body {
margin: 0px;
padding: 0px;
}
#container {
min-width: auto;
position: relative;
/* height: 77%;*/
width: 550px;
margin: 0 auto;
/* margin-top:7%;*/
}
#controllers {
position: static;
height: 20px;
}
#previous {
position: absolute;
left: 0px;
}
#next {
position: absolute;
right: 0px;
}
#tag {
position: static;
height: 20px;
line-height: 1.7em;
padding-top: 5px;
}
.buttons {
cursor: pointer;
}
#imagewrap{
border: 1px solid #818181;
overflow: hidden;
z-index: 2;
background-color: red;
}
#front {
display: block;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<div id="header">
</div>
<div id="wrap">
<div id="container">
<div id="controllers">
<div id="previous" class="buttons">
<p id="try" onclick="change(-1);">PREVIOUS</p>
</div>
<div id="next" class="buttons">
<p id="try2" onclick="change(1);">NEXT</p>
</div>
</div>
<div id="imagewrap">
<img src="Images/01PARANA/Image1.jpg" height="100%" id="front" />
</div>
<div>
<p id="tag">Text</p>
</div>
</div>
</div>
<div id="footer">
</div>
<script type="text/javascript" src="JavaScript2.js"></script>
</body>
</html>
#wrap {
min-height: calc(100vh-200px);
}
This will set the wrap to be the screen height minus the height of the header and footer.
The 200px value can just be changed to be the combined height of the header and footer.
I am making a website and I want, on different displays, for it to look almost the same, if I zoom the margin to be smaller - I think you know what I am trying to say. I am looking at another site to see how it works. You can check it here: http://motika.com.mk/. Try to zoom there. I don't know what the problem is.
This is my code:
<head>
<link rel="stylesheet" href="dodatoci/stilovi/stilovi.css">
<meta charset="utf-8"/>
<title>Услуги | Што се нуди?</title>
</head>
<body>
<div id = "glavendrzac">
<!--<table id = "goretabela">
<tr>
<td style="width:220px;"><img src="dodatoci/sliki/logo.png" id = "logoslika" onmouseover="this.src='dodatoci/sliki/logohover.png';" onmouseout="this.src='dodatoci/sliki/logo.png';"/></td>
<div class="dropdown">
<td style="width:220px;"><button class = "dropbtn"></button></td>
</div>
</div>
</tr>
</table>-->
<div id = "meni">
<nav>
<ul id = "meninav">
<li><img src="dodatoci/sliki/logo.png" onmouseover="this.src='dodatoci/sliki/logohover.png';" onmouseout="this.src='dodatoci/sliki/logo.png';"/></li>
<li><div class="dropdown" style="float:left;">
<button class="dropbtn"></button>
<div class="dropdown-content" style="left:0;">
<table id = "tabelamenispusti">
<tr>
<td>
Берово
Битола
Богданци
Валандово
Велес
Виница
Гевгелија
Гостивар
Дебар
</td>
<td>
Делчево
Демир Капија
Демир Хисар
Кавадарци
Кичево
Кочани
Кратово
Крива Паланка
Куманово
</td>
<td>
Крушево
М. Брод
M. Каменица
Неготино
Охрид
Пехчево
Прилеп
Пробиштип
Радовиш
</td>
<td>
Ресен
Свети Николе
<strong>Скопје</strong>
Струга
Струмица
Тетово
Штип
</td>
</tr>
</table>
</div>
</div></li>
</ul>
</nav>
</div>
<div id = "uslugibn">
<img style="width:100%; height: 300px;" src="dodatoci/sliki/banner.png"/>
</div>
<div id = "reklama">
<img src="dodatoci/reklami/setec1.jpg" style = "width:100%;"/>
</div>
</div>
</body>
And this is CSS code:
body{
background-color: #e4e4e4;
margin: 0;
}
#glavendrzac{
margin-left: 10%;
margin-right: 10%;
margin-top: 1em;
background-size: contain;
}
.logoslika:hover{
cursor:text;
}
#goretabela{
border-collapse: collapse;
background-color: #41c2ac;
width: 100%;
}
#goretabela td{
border-collapse: collapse;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
#goretabela td tr{
border-collapse: collapse;
}
.dropbtn {
background-image: url("../sliki/meni.jpg");
width: 220px;
height: 60px;
border: none;
cursor: pointer;
display: inline;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 0;
margin: 0;
}
.dropdown-content a {
color: black;
padding: 10px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #51d2bc}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-image: url("../sliki/menihover.jpg");
}
#uslugibn{
background-image: url("../sliki/banner.png");
width: 100%;
height: 300px;
}
#meninav{
background-color: #41c2ac;
height: 60px;
margin: 0;
}
#meninav li{
display: inline-block;
}
#tabelamenispusti{
border: 2px solid #41c2ac;
padding: 0;
margin: 0;
}
#tabelamenispusti a{
width: 150px;
}
#tabelamenispusti td{
padding: 0;
margin: 0;
}
Can you add this code
#main {
max-width: 1278px;
width: 90%;
}
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?