Avatar billede andersmnielsen Nybegynder
28. januar 2012 - 11:17 Der er 5 kommentarer og
1 løsning

Padding og billeder

Hej,

Jeg har et problem med menuområdet med alle billederne på:

venomoussnakes.net/test.htm

Jeg ønsker mellemrummet mellem teksten og 1px bjælken nedenfor kun er 1/4 af hvad den er nu, og så ønsker jeg, at der er et lille mellemrum mellem billedet nedenfor og bjælken. Det mellemrum skal også være 1/4 af den samlede afstand mellem tekst og bjælke.

Altså således at den samlede afstand mellem tekst og efterfølgende billede halveres alt i alt.

Jeg kan simpelthen ikke finde der i CSS'en hvor jeg laver de pågældende ændringer.

CSS'en hedder venomoussnakes.net/test.css og følger også her:


html, body {
    height: 100%;
}

body {
    margin: 0px;
    padding: 0px;
    background: #161A1F;
    font: 12px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #777777;
}

h1, h2, h3 {
    margin: 0px;
    padding: 0px;
    font-family: 'Ubuntu Condensed', sans-serif;
}

p, ol, ul {
    margin-top: 0px;
}

p, ol {
    font: 12px/20px Verdana, "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.sidetext {font: 12px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;}

strong {
    font-weight: normal;
    color: #41474E;
}

a {
    color: #0054C9;
}

a:hover {
    text-decoration: none;
}

a img {
    border: none;
}

img.border {
}

img.alignleft {
    float: left;
}

img.alignright {
    float: right;
}

img.aligncenter {
    margin: 0px auto;
}

hr {
/*    display: none;*/
}

/** WRAPPER */

#wrapper {
    overflow: hidden;
    padding: 20px 0px 40px 0px;
    background: #FFFFFF;
}

.container {
    width: 960px;
    margin: 0px auto;
}

.clearfix {
    clear: both;
}

.indent20{text-indent:20px;}

/** HEADER */

#header-wrapper {
    height: 131px;
    background: url(images/subpage1_01.gif) repeat-x left top;
}

.homepage #header-wrapper {
    height: 480px;
    background: url(images/homepage01.gif) repeat-x left top;
}


#header {
    height: 131px;
}

/** LOGO */

#logo {
    float: left;
    width: 360px;
    height: 131px;
}

#logo h1 {
    margin: 0px;
    padding: 0px;
    line-height: normal;
}

#logo h1 a {
    display: block;
    padding: 60px 0px 0px 0px;
   
    text-decoration: none;
    font-family: Verdana, 'Lobster', cursive;
    font-size: 24px;
    font-weight: normal;
    color: #FFFFFF;
}

/** MENU */

/** MENU */

#menu {
    float: right;
    width: 600px;
    height: 131px;
}

#menu ul {
    float: right;
    margin: 0px;
    padding: 75px 0px 0px 0px;
    list-style: none;
    line-height: normal;
}

#menu li {
    float: left;
    margin-left: 17px;
    line-height: 32px;
}

#menu a {
    display: block;
    float: left;
    height: 32px;
    text-decoration: none;
    font-family: 'Ubuntu Condensed', sans-serif;
    font-weight: normal;
    font-size: 17px;
    color: #FFFFFF;
}

#menu span {
    display: inline-block;
    height: 32px;
    padding: 0px 15px;
}

#menu li.active {
    background: url(images/homepage03.gif) repeat-x left top !important;
}
#menu li:hover {
    background: url(images/homepage03.gif) repeat-x left top !important;
}

#menu a:hover {
    background: url(images/homepage02.gif) no-repeat left top !important;
}

#menu a:hover span {
    background: url(images/homepage04.gif) no-repeat right top !important;
    text-shadow: 1px 1px 1px #FFFFFF !important;
    color: #1C1917 !important;
}

/** PAGE */

#page {
    background: url(images/homepage06.gif) repeat-y left top;
}

#page-bgbtop {
    background: url(images/homepage05.gif) no-repeat left top;
}

#page-bgbtm {
    overflow: hidden;
    clear: both;
    padding: 0px 30px 20px 16px;
    background: url(images/homepage07.gif) no-repeat left bottom;
}

.subpage #page {
    background-image:url(images/subpage2_02.gif);
}

.subpage #page-bgbtop {
    background-image:url(images/subpage2_01.gif);
}

.subpage #page-bgbtm {
    padding: 0px 16px 20px 30px;
    background-image:url(images/subpage2_03.gif);
}

.single #page {
    background-image:url(images/subpage3_02.gif);
}

.single #page-bgbtop {
    background-image:url(images/subpage3_01.gif);
}

.single #page-bgbtm {
    padding: 0px 30px 20px 30px;
    background-image:url(images/subpage3_03.gif);
}


/** CONTENT */

#content {
    float: right;
    width: 703px;
}

.subpage #content {
    float: left;
}

#content .title, #sidebar .title {
    text-shadow: none;
    letter-spacing: normal;
    font-size: 18px;
    color: #FF3600;
}

/** SIDEBAR */

#sidebar {
    float: left;
    width: 188px;
}

.subpage #sidebar {
    float: right;
}

/** FOOTER */

#footer {
    height: 170px;
    background: url(images/homepage16.gif) repeat-x left top;
}

#footer p {
    margin: 0px;
    padding: 50px 0px 0px 0px;
    text-align: center;
    color: #42484F;
}

#footer a {
    color: #42484F;
}

/** FOOTER CONTENT */

#footer-content {
    overflow: hidden;
    background: #F4F3F2;
    padding: 40px 0px;
    border-top: 1px solid #E8E7E6;
}

/** SLIDERTRON */

#slidertron-wrapper {
    padding-top: 28px;
}

#slidertron {
    position: relative;
    width: 960px;
    height: 310px;
    margin: 0px auto;
}

#slidertron .viewer {
    width: 960px;
    height: 270px;
    overflow: hidden;
}

#slidertron .reel {
}

#slidertron .slide {
}

#slidertron .indicator {
}

#slidertron .indicator ul {
    margin: 0px;
    padding: 16px 0px 0px 0px;
    list-style: none;
    text-align: center;
}

#slidertron .indicator li {
    display: inline;
}

#slidertron .indicator span {
    display: inline-block;
    width: 19px;
    height: 20px;
    background: url(images/slidertron.png) no-repeat -19px -270px;
    text-indent: -9999em;
}

#slidertron .indicator li.active {
}

#slidertron .indicator li.active span {
    background-position: 0px -270px;
}

#slidertron .border {
    display: block;
    width: 960px;
    height: 270px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: url(images/slidertron.png) no-repeat 0px 0px;
}

/** HEADING TITLE */

.heading-title {
    display: block;
    height: 57px;
    line-height: 57px;
    letter-spacing: -1px;
    text-shadow: 1px 1px 1px #FFFFFF;
    font-size: 21px;
    font-weight: normal;
    color: #484848;
}

/** TWO COLUMNS */

#two-columns {
    overflow: hidden;
    padding: 20px 0px 0px 0px;
}

#two-columns .center {
    float: left;
    width: 370px;
}

#two-columns .right {
    float: right;
    width: 250px;
}

/** THREE COLUMNS */

#three-columns {
    width: 930px;
    padding: 0px 15px;
}

#three-columns p {
    margin: 0px;
}

#three-columns a {
    color: #46423E;
}

#three-columns #column1 {
    float: left;
    width: 225px;
    margin-right: 30px;
}

#three-columns #column2 {
    float: left;
    width: 370px;
}

#three-columns #column3 {
    float: right;
    width: 265px;
}

/** BOX 1 */

#box1 {
}

/** BOX 2 */

#box2 {
    clear: both;
    padding-top: 15px;
}

/** BOX 3 */

#box3 {
}

/** BOX 4 */

#box4 {
    clear: both;
    padding-top: 15px;
}

/** BOX 5 */

#box5 {
    padding-bottom: 20px;
}

/** BOX 6 */

#box6 {
    padding-bottom: 20px;
}

/** BOX 7 */

#box7 {
    padding-bottom: 20px;
}

/** BOX 8 */

#box8 {
    clear: both;
    padding-top: 15px;
}

/** BOX 9 */

#box9 {
    padding-top: 25px;
}
#box9 h1 {
    margin-bottom: 20px;
}
/** BOX STYLE 1 */

.box-style1 .title {
    padding-bottom: 20px;
    letter-spacing: -1px;
    text-shadow: 1px 1px 1px #FFFFFF;
    font-size: 21px;
    font-weight: normal;
    color: #484848;
}

.box-style1 .title a {
    text-decoration: none;
}

.box-style1 .title a:hover {
    text-decoration: none;
}

/** LIST STYLE 1 */

ul.style1 {
    margin: 0px;
    padding: 0px 0px 10px 0px;
    list-style: none;
}

ul.style1 li {
    padding: 1px 0px;
    border-top: 1px solid #E2E1E0;
}

ul.style1 a {
    text-decoration: none;
    color: #999 !important;
}

ul.style1 a:hover {
    text-decoration: underline;
}

ul.style1 .first {
    border: none;
}

ul.style1 li p a span {
    font-size: 11px;
    font-weight: bold;
    color: #000;
}

/** LIST STYLE 2 */

ul.style2 {
    margin: 0px;
    padding: 10px 0px 0px 0px;
    list-style: none;
}

ul.style2 li {
    float: left;
    margin-right: 13px;
}

/** LIST STYLE 3 */

ul.style3 {
    margin: 0px;
    padding: 15px 0px 0px 0px;
    list-style: none;
}

ul.style3 li {
}

ul.style3 a {
    font: normal 12px/22px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

/** LINK STYLE 1 */

.link-style1 {
    display: inline-block;
    height: 28px;
    margin: 25px 0px;
    background: url(images/homepage09.gif) repeat-x left top;
}

.link-style1 a {
    display: inline-block;
    height: 28px;
    background: url(images/homepage08.gif) no-repeat left top;
    letter-spacing: -1px;
    line-height: 28px;
    text-decoration: none;
    text-shadow: 1px 1px 1px #FFFFFF;
    font-family: 'Ubuntu Condensed', sans-serif;
    font-size: 15px;
    font-weight: normal;
    color: #484848;
}

.link-style1 span {
    display: inline-block;
    padding: 0px 15px 0px 30px;
    background: url(images/homepage10.gif) no-repeat right top;
    color: #484848;
}

/** IMAGE BORDER STYLE 1 */

.image-style1 {
    position: relative;
    float: left;
    width: 60px;
    height: 60px;
    margin-right: 15px;
  margin-left: 8px;
}

.image-style1 span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.image-style1 img {
    position: absolute;
    top: 0;
    left: 0;
}

.image-style1a span {
    background: url(images/pics05.png) no-repeat left top;
}

/** IMAGE BORDER STYLE 2 */

.image-style2 {
    position: relative;
    width: 370px;
    height: 162px;
    margin: 25px 0px;
}

.image-style2 span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.image-style2 img {
    position: absolute;
    top: 0;
    left: 0;
}

.image-style2a span {
    background: url(images/pics07.png) no-repeat left top;
}

/** IMAGE BORDER STYLE 3 */

.image-style3 {
    position: relative;
    width: 250px;
    height: 75px;
    margin-bottom: 20px;
}

.image-style3 span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.image-style3 img {
    position: absolute;
    top: 0;
    left: 0;
}

.image-style3a span {
    background: url(images/pics11.png) no-repeat left top;
}

/** IMAGE BORDER STYLE 4 */

.image-style4 {
    position: relative;
    float: left;
    width: 180px;
    height: 162px;
    margin-right: 25px;
}

.image-style4 span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.image-style4 img {
    position: absolute;
    top: 0;
    left: 0;
}

.image-style4a span {
    background: url(images/pics13.png) no-repeat left top;
}
.indent450{
    text-indent: 350px;
}
Avatar billede olebole Juniormester
28. januar 2012 - 16:16 #1
<ole>

Du har masser af fejl i HTML-koden, hvoraf en del er meget alvorlige. Dem bør du allerførst få rettet, hvis du skal kunne stole på din CSS.

/mvh
</bole>
Avatar billede olebole Juniormester
28. januar 2012 - 16:19 #2
Du kan begynde med at rette begyndelsen af dokumentet til:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

- hvilket vil fjerne en hel del af fejlene, da koden er skrevet i HTML og ikke i XHTML
Avatar billede Kaa85 Praktikant
29. januar 2012 - 10:08 #3
Som olebole også indikerer, må jeg godt nok sige din html er noget rodet og uoverskuelig :-P
Tables der indeholder list elementer, inde i en list? Det er vist ikke helt efter bogen :-P. Tror du ku skære ret meget html og css væk hvis du kiggede lidt nærmere på det. Anyways:

(div)
ul.style1 li {
    padding: 1px 0px;
    border-top: 1px solid #E2E1E0;
}
(/div)

For mig ser det ud som om det er her du smider din top-border på menuen ude til venstre.
Hvis du nu havde en almindelig liste med <ul><li></li>..</ul>, burde det bare være den top padding du skulle ændre på, så f.eks.

(div)
ul.style1 li {
    padding: 10px 0px;
    border-top: 1px solid #E2E1E0;
}
(/div)

men eftersom du har en table før dit li element virker det måske ikke, derimod burde:

(div)
ul.style1 li {
    padding: 1px 0px;
}


ul.style1 td {
padding-top: 10px;
border-top: 1px solid #E2E1E0;
}
(/div)

nok give det ønskede resultat?
Avatar billede andersmnielsen Nybegynder
31. januar 2012 - 22:23 #4
Mærkeligt nok er der tale om et købt template design. God ide at få det rettet igennem.

Bare smid et svar Kaa85

Fik opgaven løst af en Freelancer, da jeg ikke troede jeg ville få svar herinde
Avatar billede olebole Juniormester
31. januar 2012 - 23:23 #5
Nu er jeg lidt i tvivl om, hvorvidt du mener, at denne side skulle være den rettede. Den trænger i hverfald i præcis ligeså høj grad til en kyndig gennemskrivning.

Hvis det faktisk er den 'rettede' udgave, håber jeg sandelig ikke, du også har betalt for 'rettelsen'
Avatar billede Kaa85 Praktikant
01. februar 2012 - 07:20 #6
Svar
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