Problem med textplacering

Isza-96Medlem sedan apr. 200924 inlägg

17 juni 2009 19:11#1

Jag har gjort en enkel webbplats där jag har en menyrad med länkar. Nu har jag ett , förmodligen väldigt enkelt , men otroligt irriterande problem som jag inte lyckas lösa.

Texten ligger något för långt till höger och jag vill bara flytta den så att all text kommer på samma rad. Problemet är att flyttar jag texten åt vänster så flyttar sig också den blå bakgrunden (utanför sidan).

Hoppas att någon förstår hur jag menar och kan tipsa mig. Det är ganska mycket kod men jag hoppas att ni orkar läsa det ändå.

Tack på förhand!

<?php
echo ("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>
<!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\" xml:lang=\"sv\" lang=\"sv\">");
?> 

<head>

<title>Kryssa Lugnt-Grekland</title>

<link type="text/css" rel="stylesheet" href="kryssalugnt.css" />
</head>

<body>

<div id="hela">

<div id="sidhuvud"><img src="sidhuvud_770_130.jpg" alt="Sidhuvud med logotype" width="770" height="130"/></div>

<div id="tid">

<?php
echo(date("Y-m-d H:i:s"));
?>
</div>

<div id="meny">
<ul>
<li><a href="kryssalugntgrekland.php" title="Startsida">Hem</a></li>
<li><a href="varaskepp.php" title="Beskrivning av våra skepp">Våra skepp</a></li>
<li><a href="hamnar.php" title="Information om de hamnar vi besöker">Hamnar vi besöker</a></li>
<li><a href="innanduanlander.php" title="Bra att veta innan du anländer">Innan du anländer</a></li>
<li><a href="aktiviteter.php" title="Information om våra aktiviteter ombord">Aktiviteter ombord</a></li>
<li><a href="kontakt.php" title="Kontakta oss">Kontakt</a></li>
<li><a href="faq.php" title="Vanliga frågor och svar">Vanliga frågor och svar</a></li>
</ul>

</div>

body {
margin: 0;
padding: 0;
margin-top: 0;
margin-bottom: 0;
background-color: #0066cc;
}

a {
color: #000099;
text-decoration: none;
}

#hela {

width: 770px;
font-size: 100%; 
margin-left: 450px;
margin-bottom: 0;
line-height: 150%; 
background-color: #FFFFFF;
}

#tid {
position: absolute;
top: 150px;
left: 770px;
}

h1{
color: black;
font-family: verdana, sans-serif;
font-size: 100%;
line-height: 150%;
margin-bottom: 20px;
margin-top: 30px;
margin-left: 100px;

}

.ingress{
font-size: 75%;
font-weight: bold;}

#reling {
margin-left: 100px;
margin-right: 315px;
border-color: #004181;
Border-style: solid;
}

#guldskepp {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#platinaskepp {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#diamantskepp {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#nrettskepp {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#mandraki {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#oia {
margin-left: 100px;
margin-right: 315px;
border-color: #004181;
Border-style: solid;
}

#ephesosamfiteater {
margin-left: 100px;
margin-right: 315px;
border-color: #004181;
Border-style: solid;
}

#mykonos {
margin-left: 100px;
margin-right: 315px;
border-color: #004181;
Border-style: solid;
}

#knossos {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#limassol {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#rhodosdelfin {
margin-left: 100px;
margin-right: 315px;
border-color: #004181;
Border-style: solid;
}

#akropolis {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#bordsdekoration {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#massage {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#casino {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

#faq {
margin-left: 100px;
margin-right: 315px;
border-color: #004181;
Border-style: solid;
}

#ros {
margin-left: 100px;
margin-right: 465px;
border-color: #004181;
Border-style: solid;
}

p{
color: black;
font-family: verdana, sans-serif;
font-size: 75%;
margin-top: 10px;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 100px;
margin-right: 100px;
line-height: 150%;
}

h2{
color: black;
font-family: verdana, sans-serif;
font-size: 85%;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 100px;
line-height: 150%;
}

h3{
color: black;
font-family: verdana, sans-serif;
font-size: 90%;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 100px;
line-height: 150%;
}

h4 {
color: black;
font-family: verdana, sans-serif;
font-size: 75%;
font-weight:bold;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 100px;
line-height: 150%;
}

#meny{
width: 100%;
margin-top: -14px;
margin-bottom: 20px;
background-color: #bfdfff;
text-align: left;
font-size: 85%;
padding: 0;
}

#menu ul{
padding: 20px 10px 0 0;
}

#meny li{
display: inline;
margin: 1px 1px 1px 1px;
}

#meny a{
color: #004181;
text-decoration: none;
padding: 0 10px 0 10px;
}

#meny a:hover{
color: red;
text-decoration: underline;
}

#meny a:visited {
color: black
}

#undermeny {
position: absolute;
margin-left: -90px;
width: 30px;
margin-top: 87px;
}

#nyheter {
position: absolute;
margin-left: -90px;
width: 40px;
margin-top: 115px;
font-size: 75%;
}

#kontakt {
margin-left: 90px;
font-size: 75%;
top: 985px;
margin-bottom: 0;
}

#faktaruta1 {
margin-left: 70px;
color: black;
font-family: verdana, sans-serif;
font-size: 75%;
}

#faktaruta2 {
margin-left: 70px;
color: black;
font-family: verdana, sans-serif;
font-size: 75%;
}

#faktaruta3 {
margin-left: 70px;
color: black;
font-family: verdana, sans-serif;
font-size: 75%;
}

#faktaruta4 {
margin-left: 70px;
color: black;
font-family: verdana, sans-serif;
font-size: 75%;
}

#komihåg {
margin-left: 70px;
margin-right: 100px;
color: black;
font-family: verdana, sans-serif;
font-size: 75%;
}

#kontakt {
margin-left: 90px;
font-size: 75%;
top: 985px;
margin-bottom: 0;
}

.clearfix{
margin-left: 100px;
color: black;
font-family: verdana, sans-serif;
font-size: 75%;
}

.mail {
margin-left: 135px;
font-size: 75%;
top: 985px;
margin-bottom: 0;
}

@media print {

body {font-family: Georgia; serif; 
font-size: 20pt;}
#hela {width: 770pt;}
#sidhuvud {display: none;}
#reling {display: none;}
#tid {display: none;}
#guldskepp {display: none;}
#platinaskepp {display: none;}
#diamantskepp {display: none;}
#nrettskepp {display: none;}
#mandraki {display: none;}
#oia {display: none;}
#ephesosamfiteater {display: none;}
#mykonos {display: none;}
#knossos {display: none;}
#limassol {display: none;}
#rhodosdelfin {display: none;}
#akropolis {display: none;}
#bordsdekoration {display: none;}
#massage {display: none;}
#casino {display: none;}
#faq {display: none;}
#ros {display: none;}

}

MeddaMedlem sedan juni 200932 inlägg

17 juni 2009 21:58#2

jag har inte kollat sa mycket pa koden, men om du ska kunna flytta texten vanster om din div, sa far du satta texten utanfor diven och satta absolute pa den oxa :)

Isza-96Medlem sedan apr. 200924 inlägg

18 juni 2009 09:49#3

Tack för ditt tips!
Jag var inne på samma sak men visste inte riktigt hur jag skulle göra. Vet fortfarande inte om jag ska vara ärlig. Har döpt om själva menytexten till just menytext kopplat till en div. Utrymmet bakom menytexten heter "meny", också det kopplat till en div.

Men nu försvann den ljusblå bakgrunden jag ville ha bakommenytexten..!?
Någon som orkar titta igen och förklara hur jag ska göra?

<div id="menytext">
<ul>
<li><a href="kryssalugntgrekland.php" title="Startsida">Hem</a></li>
<li><a href="varaskepp.php" title="Beskrivning av våra skepp">Våra skepp</a></li>
<li><a href="hamnar.php" title="Information om de hamnar vi besöker">Hamnar vi besöker</a></li>
<li><a href="innanduanlander.php" title="Bra att veta innan du anländer">Innan du anländer</a></li>
<li><a href="aktiviteter.php" title="Information om våra aktiviteter ombord">Aktiviteter ombord</a></li>
<li><a href="kontakt.php" title="Kontakta oss">Kontakt</a></li>
<li><a href="faq.php" title="Vanliga frågor och svar">Vanliga frågor och svar</a></li>
</ul>

</div>

#menytext {
position: absolute;
width: 100%;
margin-top: -40px;
margin-bottom: 20px;
margin-left: 10px;
font-size: 85%;
padding: 0;
}

#meny{
width: 100%;
margin-top: -14px;
margin-bottom: 20px;
background-color: #bfdfff;
padding: 0;
}

#menytext ul{
padding: 20px 10px 0 0;
}

#menytext li{
display: inline;
margin: 1px 1px 1px 1px;
}

#menytext a{
color: #004181;
text-decoration: none;
padding: 0 10px 0 10px;
}

#menytext a:hover{
color: red;
text-decoration: underline;
}

#menytext a:visited {
color: black
}