Hvordan sette ramme på uten at de blir dratt ut.

EvilCat · 15. desember 2006

Hei. trenger hjelp til å rette opp koden i css evt. html. Hva er feilen, hvorfor drar den ramma i banneren seg? (når jeg skyver selve ramma i opera fram og tilbake drar banner midt og lengre utafor den standard ramme fra hele siden ut. Ønsker at banneren skal står stille som på den hele siden. åssen gjør jeg det?

Se de 2 bilder jeg har lagt til.

Her er koden til css, finner ikke feilen :S

html { 
 padding:0px;
 margin:0px;
}

body {
color:#333333;
margin:0px;
padding:0px;
background-image: url(copyright/bg1202.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

#header {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}

#header1 {
background-color: #102052;
margin: 0px;
padding: 0px;
height: 20px;
float: left;
width: 754px;
}

#top {
clear: both;
width: 100%;
height: 50px;
border-top: 4px solid #5B1860;
}

h1{
padding: 5px 0px 0px 0px;
font-size: 13px;
margin: 10px 0px 0px 10px;
border-bottom: 2px solid #102052;
font-family:Arial, Helvetica, sans-serif;
}

h2{
padding: 5px 0px 0px 0px;
font-size: 13px;
margin: 10px 0px 0px 10px;
border-bottom: 2px solid #333333;
font-family:Arial, Helvetica, sans-serif;
}


h5{
padding: 0px 5px 5px 0px;
font-size: 11px;
margin: 10px 0px 0px 10px;
font-family:Arial, Helvetica, sans-serif;
color: #FFFFFF;
}

p,pre, h1 {
margin:0px 10px 10px 10px;
}

a {
color: #333333;
font-size: 11px;
background-color:transparent;
text-decoration: none;
margin: 0px 0px 4px 0px;
}

a:hover
{
padding-bottom: 2px;
background: transparent;
color: #D0A11D;
}

pre {
color: #333333;
font-size: 11px;
background-color:transparent;
font-family: Arial, Helvetica, sans-serif;
}

/*  positioning-layers statisch und absolut */

#box {
width:754px;
margin: 0px auto;
padding:6px;
text-align:left;
background-color: #D0A11D;
}

#side-a {
width:175px;
padding:0px;
float:left;
background-color:#FFFFFF;
height: 390px;
}

#content {
width:577px;
padding:0px;
float:right;
background-color:#FFFFFF;
overflow: auto;
border-left: 2px solid #D0A11D;
height: 530px;
}

#side-b {
width:175px;
padding:0px;
float:left;
background-color:#FFFFFF;
height: 110px;
}

#side-c {
width:376px;
padding:0px;
float:left;
background-color:#FFFFFF;
height: 170px;
border-top: 2px solid #D0A11D;
}

#footer {
clear: both;
background: #A2A2A2;
width: 754px;
border-bottom: 4px solid #5B1860;
color: #FFFFFF;
font-family: "Trebuchet MS";
font-size: 10px;
text-align: center;
border-top: 4px solid #102052;
background-image: url(copyright/footerbg.png);
}

#masterdiv {
background-color: #FFFFFF;
border-left: 5px;
height: 100px;
margin: 0px 0px 0px 10px;
}

#menu3 {
border: 5px 0px 0px;
border-left: 4px solid #FFFFFF;
border-right: 4px solid #FFFFFF;
border-bottom: 4px solid #FFFFFF;
border-top: 6px solid #FFFFFF;
background-color: #FFFFFF;
height: 60px;
}

#edialog {
background-color: #E0E0E0;
height: 81px;
border: 5px 0px 0px;
border-left: 4px solid #FFFFFF;
border-right: 4px solid #FFFFFF;
border-bottom: 4px solid #FFFFFF;
border-top: 4px solid #FFFFFF;
}

#banner1 {
border: 5px 0px 0px;
border-left: 2px solid #D0A11D;
border-right: 2px solid #D0A11D;
border-bottom: 2px solid #D0A11D;
border-top: 2px solid #D0A11D;
background-color: #E0E0E0;
height: 366px;
width: 150px;
float: none;
position: absolute;
left: 996px;
top: 78px;
}

#banner2 {
border: 5px 0px 0px;
border-left: 2px solid #D0A11D;
border-right: 2px solid #D0A11D;
border-bottom: 2px solid #D0A11D;
border-top: 2px solid #D0A11D;
background-color: #E0E0E0;
height: 366px;
width: 150px;
float: none;
position: absolute;
left: 996px;
top: 453px;
}
</style>

<script type="text/javascript">

/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
 if(el.style.display != "block"){ //DynamicDrive.com change
 	for (var i=0; i<ar.length; i++){
   if (ar[i].className=="submenu") //DynamicDrive.com change
   ar[i].style.display = "none";
 	}
 	el.style.display = "block";
 }else{
 	el.style.display = "none";
 }
}
}

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

/* common styling */
.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; font-size:11px;}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#333333;
width:140px;
height:10px;
text-align:left;
border:1px solid #FFFFFF;
border-width:0px 0px 0px 0px;
line-height:15px;
font-size:11px;
font-family: Arial, Helvetica, sans-serif;
}
.menu ul {padding:0px; margin:0px;list-style-type: none; }
.menu ul li {
float:left;
margin-right:1px;
position:relative;
}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {
color:#D0A11D;
background-color: #FFFFFF;
}
.menu ul li:hover ul {
display:table-row-group;
position:relative;
top:0;
left:175px;
width:105px;
}
.menu ul li:hover ul li a.hide {
background:#FFFFFF;
color:#333333;
}
.menu ul li:hover ul li:hover a.hide {
width:140px;
}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#FFFFFF; color:#333333; width:140px;}
.menu ul li:hover ul li a:hover {background:#FFFFFF; color:#D0A11D;}
.menu ul li:hover ul li:hover ul {
display:table-row-group;
position:relative;
left:151px;
top:0;
color:#333333;
}
.menu ul li:hover ul li:hover ul li a {display:block; width:140px; background:#FFFFFF; color:#333333;}
.menu ul li:hover ul li:hover ul li a:hover {background:#FFFFFF; color:#333333;}

Takker for hjelpen

EvilCat · 15. desember 2006

Glem det hele jeg har klart det

Endret 15. desember 2006 av EvilCat

Vindstille · 15. desember 2006

Når du har løst et problem, kan du sette trådtittelen til:

Svarer til Hvordan sette ramme på uten at de blir dratt ut. [løst]

Endret 15. desember 2006 av JonT

Wattengård · 15. desember 2006

Kan man embedde JS i CSS filer?

-C-

Ståle · 15. desember 2006

hvorfor har du </style> og <script>tagger i css filen?

eller er det internt i .html dokumentet?

Vindstille · 15. desember 2006

Kan man embedde JS i CSS filer?

-C-

7506673[/snapback]

Nei. Det er i hvert fall ikke meningen at man skal kunne gjør det.

Wattengård · 15. desember 2006

Nei.. Var bare jeg som så feil. Han har tydeligvis CSS'en sin inne i html fila... Foreslår å flytte all CSS og JS inn i egne filer, for å gjøre ting mer oversiktlig.

-C-

Vindstille · 15. desember 2006

Nei.. Var bare jeg som så feil. Han har tydeligvis CSS'en sin inne i html fila... Foreslår å flytte all CSS og JS inn i egne filer, for å gjøre ting mer oversiktlig.

-C-

7507350[/snapback]

Det er mye bedre å ha alt i én fil vis innholdet bare skal brukes til en side, siden nettleseren da bare trenger å gjøre en http forespørsel og bare sende over user-agent, cookie-informasjon ol. én gang.

Men vis man derimot skal bruke css koden på flere sider, eller det er meningen at filen skal laste flere ganger bør man legge det i eksterne filer, siden nettleserne da bare trenger å sende over css og javascript koden én gang, uansett hvor mange sier man besøker.

EDIT: Når jeg tenker meg om kan de faktisk være lurt å legge det i en ekstern fil selv om det bare blir lastet én gang. Siden søkemotorer og folk som har skrudd av javascript og css da ikke trenger å overføre ekstra mye informasjon. Folk som tar vare på informasjonen (f.eks. Google Search, eller Google Desktop Search som tar vare på sider personen har besøk for å kunne finne de igjen senere) trenger heller ikke da vare på unødig informasjon.

Endret 15. desember 2006 av JonT

Wattengård · 15. desember 2006

Uenig. Et HTTP kall er såppas "trafikkbillig" at å hente et par ekstra filer vil ikke gjøre noe. Dessuten så vil enhver god browser cache filene slik at de blir hentet bare en gang uansett.

Man bør derfor fokusere på oversiktlighet i kildekoden framfor en liten kilobyte mer trafikk fra server.

-C-

Vindstille · 15. desember 2006

Man bør derfor fokusere på oversiktlighet i kildekoden framfor en liten kilobyte mer trafikk fra server.

7507482[/snapback]

Det er jo like oversiktlig om man har det der eller ikke. Det bare tar litt lengre tid å scrolle.

Logg inn

Hvordan sette ramme på uten at de blir dratt ut.

Anbefalte innlegg

EvilCat

Lenke til kommentar

Videoannonse

EvilCat

Lenke til kommentar

Vindstille

Lenke til kommentar

Wattengård

Lenke til kommentar

Ståle

Lenke til kommentar

Vindstille

Lenke til kommentar

Wattengård

Lenke til kommentar

Vindstille

Lenke til kommentar

Wattengård

Lenke til kommentar

Vindstille

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Nei til pride 2024! 1 2 3 4 14

Krigen mellom Israel og Hamas 1 2 3 4 670

Woke i moderne underholdningsindustri 1 2 3 4 161

Hvem er aktive 0 medlemmer