Avatar billede nanders Nybegynder
26. februar 2011 - 23:46 Der er 18 kommentarer og
1 løsning

Billeder i højre kolonne af centreret hjemmeside

Hej Eksperter,

På siden fre2011(dot)dk kunne jeg godt tænke mig at sætte nogle billeder op i højre side af hjemmeside - altså helt ude til højre, hvor der ikke er noget.

Jeg har prøvet at finde der hvor jeg skal sætte det ind i html koden, men kan ikke finde et sted, så jeg tænker det er noget i css koden, der skal laves om.

Ser frem til eventuelle svar.

CSS koden er som følger:

/* Elements */

body {
    margin: 20px 0;
    font-family: verdana, "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 0.75em;
  color: #000000;
    }

h1 {
}

h2, h3, h4, h5, h6 {
    color: #2582A4;
}

p, ol, ul {
    text-align: justify;
}

strong {
    font-weight: bold;
    color: #808080;
}

a {
    color: #87A019;
}

a:hover {
    text-decoration: none;
    color: #2582A4;
}

.box {
    margin-bottom: 0;
    padding-bottom: 0;
    background: url(images/img07.gif) repeat-x left bottom;
}

/* Lasse Jensen start */

#bottom {
   
    display: block;
    background: url(images/img08.gif) no-repeat left bottom;
   
}

#bottom ul {
                   
    display: none;

}
               
#bottom li:hover ul {

    display: block;
    margin: 0px;
    background: url(images/img08.gif) no-repeat left bottom;

}

#submenu ul {
               
    display: none;
               
}
               
#submenu ul:hover {
                   
    float: left;
                               
}

/* Lasse Jensen slut */

.bottom2 {
    display: block;
    margin-bottom: 0;
    padding-bottom: 0px;
    background: url(images/img08.gif) no-repeat left bottom;
}

.image {
    float: left;
    margin: 31px 0 0 0;
    padding: 0;
}


.image2 {
    float: left;
    margin: 0px 0 0 0;
    padding: 0;
}

.indent {
    margin-left: 125px;
}

.indent20 {
    margin-left: 20px;
}

.center2
{
text-align: center;
}

#center3
{
text-align: center;
}

.tablegreen {
background-color: #AAD178;
}


/* Header */

#header {
    width: 928px;
    height: 37px;
    margin: 0 auto;
    background: #BECF74 url(images/img01.gif) repeat-x;
    border-bottom: 3px solid #FFFFFF;
}

/* Menu */


   
}

#menu img {border: 0px; }

#menu {
    float: left;
    width: 600px;
    height: 37px;
    margin: 0;
    padding: 0 0 0 10px;
    list-style: none;
    background: url(images/img02.gif) no-repeat;
}

#menu li {
    display: inline;
}


#menu a {
    display: block;
    float: left;
    height: 27px;
    padding: 0px 0px 0px 0px;
    text-transform: lowercase;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
}

#menu a:hover {
    background: #A4B74C url(images/img04.gif) repeat-x;
}


/* Search */

#search {
    float: right;
    height: 28px;
    margin: 0;
    padding: 9px 25px 0 0;
    background: url(images/img03.gif) no-repeat right top;
}

#search fieldset {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
}

#input1 {
    width: 164px;
    padding: 2px 5px;
    background: #FFFFFF;
    border: none;
}

#input2 {
    height: 20px;
    background: #87C4DB;
    border: none;
    text-transform: lowercase;
    font-size: 10px;
    font-weight: bold;
    color: #FFFFFF;
}

/* Content */

#content {
    width: 928px;
    margin: 0 auto;
}

#colOne {
    float: left;
    width: 238px;
  margin-top: 30px;
  background: url(images/logoverysmall.jpg) repeat-x;
    }

#colOne h3 {
    padding: 0 20px;
}

#colOne ul {
    margin-left: 0;
    padding-left: 20px;
    padding-right: 20px;
    list-style: none;
}

#colOne li {
    padding: 5px 0;
    border-top: 1px solid #EFEFEF;
}

#colOne li.first {
    border: none;
}

#colTwo {
    float: right;
    width: 617px;
    padding: 30px 40px 0 30px;
    background: url(images/img09.gif) repeat-x;
}

#colTwo h2 {
    margin-top: 0;
    font-size: 26px;
}

#colTwo h3 {
    margin-bottom: 0;
    font-size: 18px;
}

#colTwo h4 {
    margin-top: 0;
    font-size: 11px;
    font-weight: normal;
}

#colTwo .box {
    margin: 0 -30px 30px -20px;
    padding: 0 30px 0 20px;
}

#colTwo .bottom {
    margin: 0 0 20px -20px;
    padding: 0 0 20px 20px;
}

/* Logo */

#logo {
    height: 150px;
    background: url(images/img06ss.gif) no-repeat;
}

#logo h1, #logo h2, #logo a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-transform: lowercase;
    text-align: center;
    color: #FFFFFF;
}

#logo h1 {
    padding-top: 25px;
    font-size: 34px;
}

#logo h2 {
    margin-top: -5px;
    font-size: 12px;
}

/* Footer */

#footer {
    clear: both;
    width: 928px;
    margin: 0 auto;
    padding-top: 40px;
    background: url(images/img11.gif) repeat-x;
}

#footer p {
    margin: 0;
    text-align: center;
}
Avatar billede keysersoze Guru
27. februar 2011 - 10:41 #1
jeg tror du må forklare lidt nærmere - umiddelbart er der lige så meget tomt i venstre side som i højre side, er det et baggrundsbillede du tænker på eller?
Avatar billede nanders Nybegynder
27. februar 2011 - 20:35 #2
Ja, der er lige tomt i både højre og venstre billede.

De billeder der skal være i højre side er jpg billeder fra f.eks. sponsorer.

Billeder af den type der er på forsiden i forvejen - til f.eks. landsskuet.
Avatar billede keysersoze Guru
27. februar 2011 - 21:26 #3
så er det nok mere noget HTML du skal sætte ind - alternativt et baggrundsbillede på enten body eller html, men så bliver billederne ikke klikbare.
Avatar billede nanders Nybegynder
27. februar 2011 - 21:53 #4
Hej,

Det skal ikke være baggrundsbillede.

Men hvor skal jeg indsætte koden for at ramme området ude i højre side?

Det var det mit spm. gik ud på.
Avatar billede keysersoze Guru
27. februar 2011 - 22:09 #5
Det kræver din HTML for at kunne svare på - men samtidig skal du sige om siden så skal gøres bredere og stadig centreres eller om billederne bare skal svæve ude i højre side og dermed gøre siden lidt skæv.
Avatar billede nanders Nybegynder
27. februar 2011 - 22:11 #6
Html koden er på

fre2011(dot)dk

Ja, billederne skal bare svæve ude i højre side - selvom siden så bliver skæv.

/nanders
Avatar billede keysersoze Guru
27. februar 2011 - 22:35 #7
sæt position: relative; på din content-div og lav en ny div inden i den med position: absolute; og left: 930px - så kan du lægge dine billeder derind.
Avatar billede nanders Nybegynder
27. februar 2011 - 23:44 #8
Hej Keysersoze,

Det lyder rigtigt, men jeg kan ikke gennemskue det.

Ville du kunne sætte det ind i CSS'en?

/* Elements */

body {
    margin: 20px 0;
    font-family: verdana, "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 0.75em;
  color: #000000;
    }

h1 {
}

h2, h3, h4, h5, h6 {
    color: #2582A4;
}

p, ol, ul {
    text-align: justify;
}

strong {
    font-weight: bold;
    color: #808080;
}

a {
    color: #87A019;
}

a:hover {
    text-decoration: none;
    color: #2582A4;
}

.box {
    margin-bottom: 0;
    padding-bottom: 0;
    background: url(images/img07.gif) repeat-x left bottom;
}

/* Lasse Jensen start */

#bottom {
   
    display: block;
    background: url(images/img08.gif) no-repeat left bottom;
   
}

#bottom ul {
                   
    display: none;

}
               
#bottom li:hover ul {

    display: block;
    margin: 0px;
    background: url(images/img08.gif) no-repeat left bottom;

}

#submenu ul {
               
    display: none;
               
}
               
#submenu ul:hover {
                   
    float: left;
                               
}

/* Lasse Jensen slut */

.bottom2 {
    display: block;
    margin-bottom: 0;
    padding-bottom: 0px;
    background: url(images/img08.gif) no-repeat left bottom;
}

.image {
    float: left;
    margin: 31px 0 0 0;
    padding: 0;
}


.image2 {
    float: left;
    margin: 0px 0 0 0;
    padding: 0;
}

.indent {
    margin-left: 125px;
}

.indent20 {
    margin-left: 20px;
}

.center2
{
text-align: center;
}

#center3
{
text-align: center;
}

.tablegreen {
background-color: #AAD178;
}


/* Header */

#header {
    width: 928px;
    height: 37px;
    margin: 0 auto;
    background: #BECF74 url(images/img01.gif) repeat-x;
    border-bottom: 3px solid #FFFFFF;
}

/* Menu */


   
}

#menu img {border: 0px; }

#menu {
    float: left;
    width: 600px;
    height: 37px;
    margin: 0;
    padding: 0 0 0 10px;
    list-style: none;
    background: url(images/img02.gif) no-repeat;
}

#menu li {
    display: inline;
}


#menu a {
    display: block;
    float: left;
    height: 27px;
    padding: 0px 0px 0px 0px;
    text-transform: lowercase;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
}

#menu a:hover {
    background: #A4B74C url(images/img04.gif) repeat-x;
}


/* Search */

#search {
    float: right;
    height: 28px;
    margin: 0;
    padding: 9px 25px 0 0;
    background: url(images/img03.gif) no-repeat right top;
}

#search fieldset {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
}

#input1 {
    width: 164px;
    padding: 2px 5px;
    background: #FFFFFF;
    border: none;
}

#input2 {
    height: 20px;
    background: #87C4DB;
    border: none;
    text-transform: lowercase;
    font-size: 10px;
    font-weight: bold;
    color: #FFFFFF;
}

/* Content */

#content {
    width: 928px;
    margin: 0 auto;
}

#colOne {
    float: left;
    width: 238px;
  margin-top: 30px;
  background: url(images/logoverysmall.jpg) repeat-x;
    }

#colOne h3 {
    padding: 0 20px;
}

#colOne ul {
    margin-left: 0;
    padding-left: 20px;
    padding-right: 20px;
    list-style: none;
}

#colOne li {
    padding: 5px 0;
    border-top: 1px solid #EFEFEF;
}

#colOne li.first {
    border: none;
}

#colTwo {
    float: right;
    width: 617px;
    padding: 30px 40px 0 30px;
    background: url(images/img09.gif) repeat-x;
}

#colTwo h2 {
    margin-top: 0;
    font-size: 26px;
}

#colTwo h3 {
    margin-bottom: 0;
    font-size: 18px;
}

#colTwo h4 {
    margin-top: 0;
    font-size: 11px;
    font-weight: normal;
}

#colTwo .box {
    margin: 0 -30px 30px -20px;
    padding: 0 30px 0 20px;
}

#colTwo .bottom {
    margin: 0 0 20px -20px;
    padding: 0 0 20px 20px;
}

/* Logo */

#logo {
    height: 150px;
    background: url(images/img06ss.gif) no-repeat;
}

#logo h1, #logo h2, #logo a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-transform: lowercase;
    text-align: center;
    color: #FFFFFF;
}

#logo h1 {
    padding-top: 25px;
    font-size: 34px;
}

#logo h2 {
    margin-top: -5px;
    font-size: 12px;
}

/* Footer */

#footer {
    clear: both;
    width: 928px;
    margin: 0 auto;
    padding-top: 40px;
    background: url(images/img11.gif) repeat-x;
}

#footer p {
    margin: 0;
    text-align: center;
}
Avatar billede keysersoze Guru
28. februar 2011 - 07:50 #9
#content {
    width: 928px;
    margin: 0 auto;
position: relative;
}

#dinnyediv {
position: absolute;
width: 928px;
}

... resten skal du som sagt indsætte i din HTML.
Avatar billede nanders Nybegynder
02. marts 2011 - 02:31 #10
Hej,

Har du mulighed for at angive hvor i html dokumentet jeg skal indsætte:

<div id="dinnyediv">
hh
</div>

Uanset hvor jeg indsætter det, det jeg har prøvet, så ender det et eller andet sted til venstre og inde i teksten.

/ nanders
Avatar billede nanders Nybegynder
02. marts 2011 - 02:36 #11
Skal lige sige at den er uploadet nu med det pågældende CSS indsat.
Avatar billede keysersoze Guru
02. marts 2011 - 09:53 #12
div'en skal bare indsættes direkte under din content-div - jeg vil ikke lave det for dig, men hvis du viser hvad du har lavet, gerne online, kan det være vi kan se hvor det går galt.
Avatar billede nanders Nybegynder
02. marts 2011 - 21:03 #13
Hej Soze,

Jeg har uploadet det til fre2011.dk/soze.htm

Billedet står lige under flagene

Den pågældende div er sat ind lige under content div'en.

/nanders
Avatar billede keysersoze Guru
02. marts 2011 - 21:32 #14
Hvis du undlader at springer linjer over i det CSS-eksempel jeg gav vil det virke...
Avatar billede nanders Nybegynder
02. marts 2011 - 21:52 #15
Hej Soze,

Det forstår jeg simpelthen ikke.

Det du gav var:

#content {
    width: 928px;
    margin: 0 auto;
position: relative;
}

#dinnyediv {
position: absolute;
width: 928px;
}

Det er i fuldstændig overensstemmelse med CSS'en nu:

#content {
    width: 928px;
    margin: 0 auto;
    position: relative;
}

#dinnyediv {
position: absolute;
width: 928px;
}

Og jeg har sat html koden ind præcis under content div'en:

<div id="content">
 
<div id="dinnyediv">
<a href="http://www.njf.nu/site/seminarRedirect.asp?intSeminarID=441&p=1004" title="Automation and System Technology in Plant Production"><img src="images/NJF.gif" width="180" height="90" /></a>

</div>
Avatar billede keysersoze Guru
02. marts 2011 - 22:04 #16
sry - width skal være left som skrevet i #7;

left: 928px;
Avatar billede nanders Nybegynder
02. marts 2011 - 22:13 #17
Hej Soze,

Det virkede. Tusind tak.

Jeg tror endda jeg forstår princippet nu.

Hvis det nu var i venstre side, ville man da kunne skrive

left: -200 px;

hvis man ville have billedet til at starte 200 px. til venstre for indholdet?

Smid et svar under alle omstændigheder.

Mange tak igen.

/nanders
Avatar billede keysersoze Guru
02. marts 2011 - 22:42 #18
korrekt

svar allerede givet.
Avatar billede nanders Nybegynder
02. marts 2011 - 23:24 #19
Der skal stå left istedet for width i det pågældende svar - til dem der end måtte læse denne tråd.

Og det er i div'en - dinnyediv
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester