Float på bilde?

[The Stig]

Hepp!

 

Sitter for tiden å finpusser en side jeg har laget for den lokale studentkroa. Har slitt en del med CSS tidligere, og nok en gang er det design-biten som plager meg.

 

Problemet er bildet på høyre av siden, nærmere bestemt bildets plassering. Etter mye fikling fram og tilbake konkluderte jeg omsider med å bruke "float" for å plassere bildet. Bildet er perfekt posisjonert i min oppløsning (1920x1200), men blir derimot "klemt inn" så fort oppløsningen i bredden blir mindre. Er det noen som har tips til hvordan jeg løse dette problemet?

 

Legger ved lenke og CSS-fila.

 

http://94.139.87.210/vakt/control/logon.php

 

A:link {text-decoration: none; color: black;}
A:visited {text-decoration: none; color: black;}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}

.textbox {color: #db0101;}
.textboxwhite {color: #ffffff;}

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -90px; /* the bottom margin is the negative value of the footer's height */
}
.push {
height: 90px; /* .push must be the same height as .footer */
}

.footer {
   height: 90px; /* .push must be the same height as .footer */
   background: url("/vakt/img/background_1.png") 50% 50% no-repeat;
}


.floatright {
   float: right;
   margin: 0px 0px -10000px 10px;
}

body {
   margin: 0;
   padding: 0;
   background-color: #ffffff;
   background: url("/vakt/img/background_1.png");
   background-repeat: repeat-y;
   background-position: top center;
   text-align:center;
   height: 100%;
}
#top {
   position: absolute;
}
h1, p {
   margin: 0;
   padding: 0.1em 0;
}


h1    {
   color:#f4f4f4;
   font-size:18px;
   font-family: Chiller, Stencil Std;
   font-size: 50pt;
}

/* Start på tabell CSS */

table
{
   margin-left: auto;
   margin-right: auto;
   text-align: center;


}

#specialtable
{
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   background: url("/vakt/img/tablebackground_1.png") 50% 50% repeat-y;

}

table#input
{
   color: #db0101;
   background: url("/vakt/img/inputtablebgr_1.png") repeat;

}

table#crewinput
{
   color: #db0101;
   background: url("/vakt/img/tablebackground_1.png") 50% 50% repeat-y;

}

#tableleft
{
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}

#tdimage {
   background: url("/vakt/img/tablenudge_1.png") 50% 50% repeat-x;
}

#tdimage2 {
   background: url("/vakt/img/tablenudge_2.png") 50% 50% repeat-x;
}

Endret 7. november 2010 av The Stig

[Thomas.]

Tja, er vel ikke annet å gjøre enn å legge bildet bak div'en din (bildet ligger oppå om du gjør vinduet mindre).

Da bruker du z-index.

[The Stig]

Om jeg forsto deg rett skulle jeg legge til z-index på class-en til bildet? Og så legge img-lenka inni div-en til body? I så fall, det funka ikke

[Thomas.]

Om jeg forsto deg rett skulle jeg legge til z-index på class-en til bildet? Og så legge img-lenka inni div-en til body? I så fall, det funka ikke

 

z-index only works on positioned elements

 

For å legge det bak så må du ha en value under 0. F.eks -1.

[The Stig]

Ja, satt den til -1 og for moro skyld 1 på div-en til body - ingen umiddelbar suksess. Har dessverre ikke vært konsekvent på å definere posisjonering med divs, så kan vel tenkes det blir "overkjørt" en plass.

 

Edit: Og om det ikke kom fram, jeg er altså grønnere enn gresset hva CSS angår

Endret 7. november 2010 av The Stig

[Thomas.]

Ja, satt den til -1 og for moro skyld 1 på div-en til body - ingen umiddelbar suksess. Har dessverre ikke vært konsekvent på å definere posisjonering med divs, så kan vel tenkes det blir "overkjørt" en plass.

 

Edit: Og om det ikke kom fram, jeg er altså grønnere enn gresset hva CSS angår

 

Så litt nærmere etter i koden din nå. Du bruker jo http://94.139.87.210/vakt/img/background_1.png som bakgrunn repetert nedover. Da nytter det ikke plassere bildet der du vil, det vil da alltid ligge over.

[The Stig]

Yes, fant det ut i går. Om jeg deler opp nåværende bakgrunn i to bilder og bruker float left og right på de, vil det fungere?

[Dimethyltryptamine]

EDIT: sendte deg det på pm, i stedet for å poste det her

Endret 10. november 2010 av lordbost