text ej markerbar

Hej!

Har lyckats få ordning på min positionering i CSS men nu dök ett annat problem upp. När jag lyckades få ordning på hur sidan skulle vara uppbyggd försvann möjligheten markera texten i min vänstra del av hemsidan. Där använder jag bland annat funktionen float:left. I och med att texten inte känns igen av webbläsaren försvinner således också möjligheten att klicka på länkarna.

Jag har allt inom <div></div> och jag undrar om detta kan ha något med saken att göra?

Tack på förhand!

Visa din kod/din sida så bli det enklare att felsökar vad det är för fel på koden.

supercajo skrev:

Hej!

Har lyckats få ordning på min positionering i CSS men nu dök ett annat problem upp. När jag lyckades få ordning på hur sidan skulle vara uppbyggd försvann möjligheten markera texten i min vänstra del av hemsidan. Där använder jag bland annat funktionen float:left. I och med att texten inte känns igen av webbläsaren försvinner således också möjligheten att klicka på länkarna.

Jag har allt inom <div></div> och jag undrar om detta kan ha något med saken att göra?

Tack på förhand!

Med 99% säkerhet har du inte öppnat eller stängt en eller flera taggar på rätt ställe(n). T.ex. så här: <div><img></div></img> istället för så här: <div><img></img></div> eller glömt lägga in en tagg, eller lagt in en för mycket.

Kolla hela dokumentet noggrannt, tagg efter tagg. Kolla så att dom öppnar/stänger rätt osv.

Hmm postar koden och hoppas ni kan se mitt fel/misstag

index.html:

<!-- Container starts here -->
<div id="container">
 <div id="header">
  <div id="logotype"></div><!--Close logotype-->
  <div id="ovmenu">Test | test | test</div><!--Close ovmenu-->
 </div> <!--close header-->
<div id="main">
 <div id="lbox">
  <div id="lbox2">Följ oss...</div>
  <div id="ltxtb">
	<img src="img/fb.png"><a href="http://www.facebook.com" target="blank">Facebook</a><br><img src="img/tw.png"> Twitter</div>
  <div id="lbox2">This is the left column and it will be this color all the way down no matter which column is longest.</div>
 </div> <!--close lbox (left box)-->
 
 <div id="mbox">
This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest.

This is an example of the center column being the longest. This is an example of the center column being the longest.

This is an example of the center column being the longest.

This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest.

This is an example of the center column being the longest. This is an example of the center column being the longest.This is an example of the center column being the longest. This is an example of the center column being the longest.This is an example of the center column being the longest. This is an example of the center column being the longest.This is an example of the center column being the longest. This is an example of the center column being the longest.

This is an example of the center column being the longest. This is an example of the center column being the longest. 
 </div><!--Close the mbox (main box)-->
</div> <!--Close main-->
</div> <!--Close container-->

style.css:

/* Container main-properties */
#container 
{
	 margin-right:auto;
	 margin-left:auto;
	 border-right: 5px solid #0b70b6;
	 border-left: 5px solid #0b70b6;
	 left:160px;
	 background-color:#fff;
	 width:960px;
	 padding-left: 5px;
	 padding-right: 5px;
	 padding-top: 10px;
	 padding-bottom: 10px;
}

/* header properties */
#header
{
	 width: 960px;
	 height: 65px;
	 align: left;
}

/* Logotype-properties */
#logotype
{
	 float:left;
	 width:239px;
	 height:62px;
	 background-image: url(logo.png);
	 background-color: #ffffff;
}

/* over-menu properties */
#ovmenu
{
	 position:relative;
	 padding: 10px;
	 margin-top: 3px;
	 float:right;
	 width: 697px;
	 height: 30px;
	 background-color: #ffffff;	
	 border-bottom: 2px solid #0b70b6;
	 color:  #0b70b6;
	 font-size: 25px;
	 text-align: left;
}

/* top-text properties */
#toptext
{
	 position:absolute;
	 top:10px;
	 left:10px;
}

/* main-properties */
#main
{
	 text-align: left;
	 width: 960px;
	 border-right: 5px solid #f4f5f5;
}

/* ------- The left side of the mainpage Starts here -------- */

/* the left container has been named with #lbox - left box */
#lbox
{
	 position:relative;
	 float: left;
	 width: 200px;
	 padding: 10px;
	 text-align: center;
	 
}

#ltxtb
{
	 width:200px;
	 text-align:left;
	 margin-top:5px;
	 padding:5px;
	 background-image: url(bgdot.png);
}
/* the part inside the #lbox  */
#lbox2
{
	 width: 200px;
	 background-color: #0b70b6;
	 border-color: #fff;
	 border-radius: 25px;
	 color: #ffffff;
	 padding: 10px;
	 text-align: left;
	 margin-top: 5px;
}
/* ------- Left side ends here ------- */

/* Mainpart of the page */
#mbox
{
	 position:relative;
	 padding:0 240px;
	 
}

doctype mm då?

Så här ser övre delen <head> m.m. ut: Inkl. Doctype:

<?
session_start();
?>
<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<TITLE>ENDAST MALL</TITLE>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<div id="topbox">
 <div id="tbinc"> <div id="tbleft">Test | Test | Test</div><input type="text" size="15" value="Användarnamn" /> <br /><input type="password" value="pass" size="15" /></div> <!--Close tbinc-->
</div><!--Close topbox-->

Ser inte ut som att du har stängt div-taggen med class="ltxb".
Det är bara att kolla igenom noga och hitta en matchande slut-tagg för varje start-tagg (och vice versa).

Ser ut som om du glömt body-taggen??

Edit: hett tips : http://validator.w3.org/

Bodytaggen finns....problem kvarstår. Biforgar hela html-dokumentet med hela CSS-dokumentet och hoppas att någon vänlig själ kan hjälpa mig :)

HTML dokumentet:

<?
session_start();
?>
<!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">
<head>
	<meta name="author" content="TEST" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<TITLE>ENDAST MALL</TITLE>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="topbox">
 <div id="tbinc"> <div id="tbleft">Om företaget | Att resa med oss | Kontakta oss | Bloggen </div><input type="text" size="15" value="Användarnamn" /><br /><input type="password" value="pass" size="15" /></div> <!--Close tbinc-->
</div><!--Close topbox-->

<!-- Container starts here -->
<div id="container">
 <div id="header">
  <div id="logotype"></div><!--Close logotype-->
  <div id="ovmenu">Test | test | test</div><!--Close ovmenu-->
 </div> <!--close header-->
<div id="main">
 <div id="lbox">
  <div id="lbox2">Följ oss...</div>
  <div id="ltxtb">
	<img src="img/fb.png"></img><a href="http://www.facebook.com/" target="blank">Facebook</a><br><img src="img/tw.png"> Twitter</div>
  <div id="lbox3">This is the left column and it will be this color all the way down no matter which column is longest.</div>
 </div> <!--close lbox (left box)-->
 
 <div id="mbox">
This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest.

This is an example of the center column being the longest. This is an example of the center column being the longest.

This is an example of the center column being the longest.

This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest. This is an example of the center column being the longest.

This is an example of the center column being the longest. This is an example of the center column being the longest.This is an example of the center column being the longest. This is an example of the center column being the longest.This is an example of the center column being the longest. This is an example of the center column being the longest.This is an example of the center column being the longest. This is an example of the center column being the longest.

This is an example of the center column being the longest. This is an example of the center column being the longest. 
 </div><!--Close the mbox (main box)-->
</div> <!--Close main-->
</div> <!--Close container-->
</body>
</html>

CSS-dokumentet:

/* Body properties */
body
{
	margin: 0;
	padding: 0;
	background-color:#f5f5f5;
	font-family: arial, helvetica, sans-serif;
	 text-align: center;	
	 
}
/* topbox properties (topborder) */
#topbox
{
	 background-image: url(topbg.png);
	 width: 100%;
	 height: 60;
	 padding: 5px;
	 font: Verdana;
}

/* topbox include properties */
#tbinc
{
	 margin-right:auto;
	 margin-left:auto;
	 text-align: right;
	 width: 960px;
}

#tbleft
{
	 text-align: right;
	 float: left;
	 margin-top: 3px;
	 font-size: 14px;
	 font-family: arial;
}

/* Container main-properties */
#container 
{
	 margin-right:auto;
	 margin-left:auto;
	 border-right: 5px solid #0b70b6;
	 border-left: 5px solid #0b70b6;
	 left:160px;
	 background-color:#fff;
	 width:960px;
	 padding-left: 5px;
	 padding-right: 5px;
	 padding-top: 10px;
	 padding-bottom: 10px;
}

/* header properties */
#header
{
	 width: 960px;
	 height: 65px;
	 align: left;
}

/* Logotype-properties */
#logotype
{
	 float:left;
	 width:239px;
	 height:62px;
	 background-image: url(logo.png);
	 background-color: #ffffff;
}

/* over-menu properties */
#ovmenu
{
	 position:relative;
	 padding: 10px;
	 margin-top: 3px;
	 float:right;
	 width: 697px;
	 height: 30px;
	 background-color: #ffffff;	
	 border-bottom: 2px solid #0b70b6;
	 color:  #0b70b6;
	 font-size: 25px;
	 text-align: left;
}

/* top-text properties */
#toptext
{
	 position:absolute;
	 top:10px;
	 left:10px;
}

/* main-properties */
#main
{
	 text-align: left;
	 width: 960px;
	 border-right: 5px solid #f4f5f5;
}

/* ------- The left side of the mainpage Starts here -------- */

/* the left container has been named with #lbox - left box */
#lbox
{
	 position:relative;
	 float: left;
	 width: 200px;
	 padding: 10px;
	 text-align: center;
	 
}

#ltxtb
{
	 width:200px;
	 text-align:left;
	 margin-top:5px;
	 padding:5px;
	 background-image: url(bgdot.png);
}
/* the part inside the #lbox  */
#lbox2
{
	 width: 200px;
	 background-color: #0b70b6;
	 border-color: #fff;
	 border-radius: 25px;
	 color: #ffffff;
	 padding: 10px;
	 text-align: left;
	 margin-top: 5px;
}
#lbox3
{
	 width: 200px;
	 background-color: #0b70b6;
	 border-color: #fff;
	 border-radius: 25px;
	 color: #ffffff;
	 padding: 10px;
	 text-align: left;
	 margin-top: 5px;
}
/* ------- Left side ends here ------- */

/* Mainpart of the page */
#mbox
{
	 position:relative;
	 padding:0 240px;
	 
}

Ta bort båda förekomsterna av position: relative (i #lbox och #mbox)

mbox sträcker sig ovanför din lbox sätt ett högre z-index på lbox så löser du det.

Sen verkar du köra rätt mycket konstiga värden på bredd osv på dina menyer, parent (#lbox) är den ända du behöver ha en bredd på då divar är block element.

#topbox behöver du inte heller sätta en bredd på 100% .

#container har du en left på, vilket inte kommer göra något då du inte postionera den heller.
#header behöver du inte heller ha en bredd på

Tack underbara snälla användare! Ni är värdefulla! Löste det först och främst med hjälp av att ta bort position relative som användare Metalboy nämnde. Men skall städa upp lite också så det blir renare:)

Tack!!!!!!!! många gånger om!