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; }
Annonceindlæg fra Kingston Technology
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?
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.
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.
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å.
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.
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
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.
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; }
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.
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
02. marts 2011 - 02:36
#11
Skal lige sige at den er uploadet nu med det pågældende CSS indsat.
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.
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
02. marts 2011 - 21:32
#14
Hvis du undlader at springer linjer over i det CSS-eksempel jeg gav vil det virke...
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>
02. marts 2011 - 22:04
#16
sry - width skal være left som skrevet i #7; left: 928px;
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
02. marts 2011 - 22:42
#18
korrekt svar allerede givet.
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
Vi tilbyder markedets bedste kurser inden for webudvikling