Forum Mjukvara Programmering och digitalt skapande Tråd

CSS/HTML Problem.

1
Skriv svar
Permalänk
Medlem
●

CSS/HTML Problem.

Hej!

Nu har jag kört fast ganska rejält...

Jag har hållit på med denna hemsida i ca 4 veckor nu.
Idag skulle jag testa att lägga in mera text på en sida (tavling.php) via databasen.
Och då hoppar hela sidmenyn samt undermenyn och hamnar på helt fel ställen.

Jag använder mig av "Position: relative;" samt width och top skrivna i % för att få texten samt menyerna på rätt ställen.

Här är en bild på hur det ska se ut:
http://i54.tinypic.com/205eb9e.png
Och såhär ser det ut när jag lägger till mer text:
http://i52.tinypic.com/34qs87p.png

Min fråga är då ifall ni kan kolla igenom mina dokument och se ifall ni hittar några fel, börjar bli ganska desperat nu...

tavling.php

<p style="margin-bottom: 0.14in; line-height: 115%; widows: 2; orphans: 2;" align="CENTER">
<br><br>
</p>

<center>

<img src="/logo.jpg" width="250" Height="280">
<TITLE>Häverö Brukshundklubb</TITLE>
<p style="margin-bottom: 0.14in; line-height: 115%; widows: 2; orphans: 2;" align="CENTER">
<font style="font-size: 28pt;" size="6">Välkommen till Häverö
Brukshundklubb</font></p>
<p style="margin-left: 0.91in; text-indent: 0.91in; margin-bottom: 0.14in; line-height: 115%; widows: 2; orphans: 2;">
	<link rel="stylesheet" media="all" type="text/css" href="menu_style.css" />

</head>
<body>
<!-- AVAILABLE COLORS -->
<!-- aqua, blue, gray, lime, orange, pink, purple, red -->

<!-- TO APPLY A COLOR CHOICE -->
<!-- Change the color class on the first div to one of the above mentioned colors -->
<div class="menu bubplastic horizontal aqua">
	<ul>
		<li><span class="menu_r"><a href="/klubben.php"><span class="menu_ar">Klubben</span></a></span></li>
		<li><span class="menu_r"><a href="/kalender.php"><span class="menu_ar">Kalender</span></a></span></li>
		<li class="highlight"><span class="menu_r"><a href="/tavling.php"><span class="menu_ar">Tävling</span></a></span></li>
		<li><span class="menu_r"><a href="/kurser.php"><span class="menu_ar">Kurser</span></a></span></li>
		<li><span class="menu_r"><a href="/traning.php"><span class="menu_ar">Träning</span></a></span></li>
				<li><span class="menu_r"><a href="/admin_index.php"><span class="menu_ar">Admin</span></a></span></li>
	</ul>
	<br class="clearit" />
</div>
	<link rel="stylesheet" media="all" type="text/css" href="style3.css" />
	<div class="table">
	<style type="text/css">
	
	

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.sidebarmenu ul{
position: relative;
right: ;
bottom: 231px;
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}
 
.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
background-image:url('/images/bg-bubplastic.gif');
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-image:url('/images/bg-bubplastic-h-lime.gif');
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background-image:url('/right.gif');
}

 
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>

<div class="text">
<center> </center>
<H2>Tävling</H2>
<?php
$mysql_server = "xxx";
$mysql_user = "xxx";
$mysql_password = "xxx";
$mysql_database = "xxx";

$conn = mysql_connect($mysql_server, $mysql_user, $mysql_password);
mysql_select_db($mysql_database, $conn);

$result = mysql_query("SELECT * FROM tavling ORDER by text desc LIMIT 1");

while($row = mysql_fetch_array($result))
  {
  
  echo ($row['text']);
  ?><center> </center><?php
  echo "<br />";
  }
  
?>

</div>


<div class="sidebarmenu" align=left>
<ul id="sidebarmenu1">
<li><a href="/sida.php?p=bruks">Bruks</a>
  <ul>
  <li><a href="#sok">Sök</a>
    <ul>
    <li><a href="#vadardet">Vad är det?</a></li>
    <li><a href="#kurs">Kurs/Träning</a></li>
		    <li><a href="#tavling">Tävling/Resultat</a></li>
    </ul>
  </li>
    <li><a href="#spar">Spår</a>
    <ul>
    <li><a href="#varardet2">Vad är det?</a></li>
    <li><a href="#kurs2">Kurs/Träning</a></li>
		    <li><a href="#tavling2">Tävling/Resultat</a></li>
    </ul>
  </li>
    <li><a href="#rapport">Rapport</a>
    <ul>
    <li><a href="#vadardet3">Vad är det?</a></li>
    <li><a href="#kurs3">Kurs/Träning</a></li>
		    <li><a href="#tavling3">Tävling/Resultat</a></li>
    </ul>
  </li>
    <li><a href="#skydd">Skydd</a>
    <ul>
    <li><a href="#vadardet4">Vad är det?</a></li>
    <li><a href="#kurs4">Kurs/Träning</a></li>
	    <li><a href="#tavling4">Tävling/Resultat</a></li>
    </ul>
  </li>
</ul>

</li>
<li><a href="/sida.php?p=lydnad">Lydnad</a>
  <ul>
  <li><a href="#vadardet5">Vad är det?</a></li>
  <li><a href="#kurs5">Kurs/Träning</a></li>
    <li><a href="#tavling5">Tävling/Resultat</a></li>
  </ul>
</li>
<li><a href="/sida.php?p=agility">Agility</a>
  <ul>
  <li><a href="#vadardet6">Vad är det?</a></li>
  <li><a href="#kurs6">Kurs/Träning</a></li>
    <li><a href="#tavling6">Tävling/Resultat</a></li>
  </ul>
</li>
<li><a href="/sida.php?p=rallylydnad">Rallylydnad</a>
  <ul>
  <li><a href="#vadardet7">Vad är det?</a></li>
  <li><a href="#kurs7">Kurs/Träning</a></li>
    <li><a href="#tavling7">Tävling/Resultat</a></li>
  </ul></li>

<li><a href="/sida.php?p=tjanstehund">Tjänstehund</a>
  <ul>
  <li><a href="#forsvarsmakhund">Försvarsmakthund</a>
    <ul>
    <li><a href="#vadardet8">Vad är det?</a></li>
    <li><a href="#kurs8">Kurser/Träning</a></li>
    </ul>
  </li>
    <li><a href="#raddningshund">Räddningshund</a>
    <ul>
    <li><a href="#vadardet9">Vad är det?</a></li>
    <li><a href="#kurs9">Kurser/Träning</a></li>
    </ul>
  </li>
</ul>

</li>
<li><a href="/sida.php?p=mentalbeskrivning">Mentalbeskrivning</a>
  <ul>
  <li><a href="#vadardet10">Vad är det?</a></li>
  <li><a href="#anmalan">Anmälan</a></li>
  </ul></li>
<li><a href="/sida.php?p=utstallning">Utställning</a>
  <ul>
  <li><a href="#vadardet11">Vad är det?</a></li>
  <li><a href="#kurs11">Kurs</a></li>
    <li><a href="#anmalan2">Anmälan</a></li>
  </ul>
</li>
<li><a href="/sida.php?p=ungdom">Ungdom</a>
  <ul>
  <li><a href="#vadgordom">Vad gör dom?</a></li>
  </ul></li>
<li><a href="/gastbok.php">Gästbok</a></li>
<li><a href="/sida.php?p=lankar">Länkar</a></li>
</ul>

</div>
		<div class="breadcrumb2">
  <span class="left"></span>
  <ul>
    <li><a href="/sida.php?p=bruks">Bruks</a></li>
    <li><a href="/sida.php?p=lydnad">Lydnad</a></li>
    <li><a href="/sida.php?p=agility">Agility</a></li>
	    <li><a href="/sida.php?p=rallylydnad">Rallylydnad</a></li>
		    <li><a href="/klubbtavl.php">klubbens tävlingsekipage</a></li>
  </ul>
  <span class="right"></span>
</div>

<?php
require_once ('sidfot.php');

sidfot();
?>

style3.css

body {
background-color:#FFFFFF;
}

div.table {
background-image:url('/bgtable2.png');
background-repeat:repeat-x;
height:700px;
width:717px;
} 

a:link {color: #880000; text-decoration: none;}
A:visited {color: #880000; text-decoration: none;}
A:active {color: #880000; text-decoration: none;}
A:hover {text-decoration: underline; color: #B80000;}

div.uppdateringar {
position:absolute;
top:430px;
right:367px;
width: 170px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #464032;

}

div.text {
position:relative;
top:1%;
left:89px;
width: 520px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #464032;

}

div.text2 {
position:absolute;
top:460px;
right:400px;
width: 520px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #464032;

}

/* Generated via www.cssmenubuilder.com */

.breadcrumb{position:relative; height:30px; width:537px; left:90px; top:-507px;}
.breadcrumb ul{position:relative; margin:0 5px 0 5px; padding:0; height:30px; background:url('breadcrumbImage.png') 0px -30px repeat-x; }
.breadcrumb ul li{padding:0; margin:0; list-style:none; float:left; height:30px display:inline;}
.breadcrumb ul li a{font:12px Arial, Helvetica, sans-serif; color:rgb(255,255,255); text-decoration:none; line-height:30px; display:block; background:url('breadcrumbImage.png') 100% -60px no-repeat; padding:0 17px 0 15px; }
.breadcrumb ul li a:hover {text-decoration:underline; color:rbg(255,255,255);}
.breadcrumb ul li a.active{background:none; color:rgb(255,255,255);}
.breadcrumb ul li a.active:hover {text-decoration:none;}
.breadcrumb .left{position:absolute; top:0px; left:0px; width:10px; height:30px; display:block; z-index:1; background:url('breadcrumbImage.png') 0% 0px no-repeat;}
.breadcrumb .right{position:absolute; top:0px; right:0px; width:10px; height:30px; display:block; z-index:1; background:url('breadcrumbImage.png') 100% -90px no-repeat; }

.breadcrumb2{position:relative; height:30px; width:537px; left:90px; top:-522px;}
.breadcrumb2 ul{position:relative; margin:0 5px 0 5px; padding:0; height:30px; background:url('breadcrumbImage.png') 0px -30px repeat-x; }
.breadcrumb2 ul li{padding:0; margin:0; list-style:none; float:left; height:30px display:inline;}
.breadcrumb2 ul li a{font:12px Arial, Helvetica, sans-serif; color:rgb(255,255,255); text-decoration:none; line-height:30px; display:block; background:url('breadcrumbImage.png') 100% -60px no-repeat; padding:0 17px 0 15px; }
.breadcrumb2 ul li a:hover {text-decoration:underline; color:rbg(255,255,255);}
.breadcrumb2 ul li a.active{background:none; color:rgb(255,255,255);}
.breadcrumb2 ul li a.active:hover {text-decoration:none;}
.breadcrumb2 .left{position:absolute; top:0px; left:0px; width:10px; height:30px; display:block; z-index:1; background:url('breadcrumbImage.png') 0% 0px no-repeat;}
.breadcrumb2 .right{position:absolute; top:0px; right:0px; width:10px; height:30px; display:block; z-index:1; background:url('breadcrumbImage.png') 100% -90px no-repeat; }

.breadcrumb3{position:relative; height:30px; width:537px; left:90px; top:-395px;}
.breadcrumb3 ul{position:relative; margin:0 5px 0 5px; padding:0; height:30px; background:url('breadcrumbImage.png') 0px -30px repeat-x; }
.breadcrumb3 ul li{padding:0; margin:0; list-style:none; float:left; height:30px display:inline;}
.breadcrumb3 ul li a{font:12px Arial, Helvetica, sans-serif; color:rgb(255,255,255); text-decoration:none; line-height:30px; display:block; background:url('breadcrumbImage.png') 100% -60px no-repeat; padding:0 17px 0 15px; }
.breadcrumb3 ul li a:hover {text-decoration:underline; color:rbg(255,255,255);}
.breadcrumb3 ul li a.active{background:none; color:rgb(255,255,255);}
.breadcrumb3 ul li a.active:hover {text-decoration:none;}
.breadcrumb3 .left{position:absolute; top:0px; left:0px; width:10px; height:30px; display:block; z-index:1; background:url('breadcrumbImage.png') 0% 0px no-repeat;}
.breadcrumb3 .right{position:absolute; top:0px; right:0px; width:10px; height:30px; display:block; z-index:1; background:url('breadcrumbImage.png') 100% -90px no-repeat; }

Vad kan vara fel?
Mvh djvice

Redigera
Citera flera Citera
Permalänk
Medlem
●

Du ska inte använda position relative, det är väldigt sällan man behöver det. Jag skulle nog använda absolut positionering på de där, relativt till moderelementet givetvis.

Sätt position:relative (utan top, right, left eller bottom!) på en div som omsluter de två som hoppar ner samt texten och sen sätter du position-attributet till absolute på de tre och sätter exempelvis top:0, left:0 på menyn, top:0, left:150px på breadcrumben och top:20, left:150px på textdiven. Jag skulle ha skrivit exempelkod men ska precis sticka från jobbet.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack

Okej tack ska försöka med det du sa..
Om du har tid och ork får du jätte gärna lägga upp en exempelkod.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ursäkta dröjsmålet, här är ett exempel på hur det kan se ut om man använder float:

<div id="wrap" style="margin: 0 auto; width: 700px;">
    <div id="top" style="text-align: center;">
        <h1>Välkommen :)</h1>
    </div>
    <div id="body" style="background-color: #ccc; overflow: auto;">
        <div id="menu" style="background-color: #333; height: 30px; width: 100%;"></div>
        <div id="submenu" style="float: left; background-color: #666; width: 200px; height: 300px;"></div>
        <div id="breadcrumbs" style="background-color: #999; height: 30px;"></div>
        <div id="content" style="width: 500px; float: right;">
            <h2 style="text-align: center;">Rubrik</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere magna vehicula neque rhoncus in ultrices diam ornare. Nulla facilisi. Integer nec diam eu nunc pulvinar aliquam ac in ante. Phasellus ut nulla dolor. Donec auctor velit mi. Aenean porta nibh eget enim lobortis lobortis faucibus quis ante. Pellentesque aliquet arcu ut massa aliquam id feugiat nisi dictum. Sed ut mi quis lacus vulputate tempus ac non lacus. Nulla eget rutrum metus. Donec orci justo, lacinia in ultricies sed, tempor vel eros. Praesent tincidunt orci id turpis eleifend non lobortis dui tempor. Morbi turpis sem, dictum non tristique eu, tincidunt a ante. Cras aliquam, nisi at convallis elementum, lorem neque volutpat felis, sed vestibulum orci turpis id leo. Sed eros risus, dignissim auctor commodo sed, dignissim non lacus.</p>
        </div>
    </div>  
</div>
Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara