Avatar billede darkstylerdk Nybegynder
03. juni 2004 - 19:33 Der er 46 kommentarer og
2 løsninger

Indretning af tekst efter design - hvad skal laves om i .css?

Denne side http://www.radikals.1go.dk/ er jeg ret tilfreds med (efter et par vurderinger), men da jeg skal på efterskole næste år bliver det svært at redigere den i html på efterskolens pc og uploade den bagefter. Pga. besværlighederne med dette har jeg forsøgt mig med et online news-system i php.
Det hele testes på http://radikale.users.whitehat.dk MEN det er kun fra forsiden jeg har lavet adgang til nyhedssystemet.

For at få det hele til at hænge sammen har jeg valgt at blande news-systemets stylesheets med resten af sidens stylesheet.
Man kan sige at jeg har puttet news-css ind i resten af sidens css-fil.

Desværre er der et på ting der ikke ser ret godt ud.

1. På forsiden står "Søg efter nyhed" for tæt på cellens border.

2. Hvis man klikker på "Læs mere" ved en nyhed ser det ud som på denne side: http://radikale.users.whitehat.dk/news.display.php?id=3  Her er en del af nyheden også for tæt på venstre border.

Håber i kan hjælpe.
Avatar billede darkstylerdk Nybegynder
03. juni 2004 - 19:48 #1
Jeg tror ændringerne skal ske i stylesheet.css
Her har i kilden:

html,body{margin:0px;padding:0px;}
a,a:visited,a:hover{color:black;}
td {
    background-color: #B2C3D5;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
}
img {
    border:1px solid #B2C3D5;
    border-width:1px 2px 2px 1px;
    background-color:#B2C3D5;
}
a.menu {
    background-color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    font-weight: bold;
    border-bottom-width: 5px;
    border-bottom-style: solid;
    border-bottom-color: white;
}
a.menulink {
    display: block;
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-family:arial;
    font-size:14px;
    color: #333333;
    border: 0px;
    border-bottom: 1px solid #FFFFFF;
    font-weight: bolder;
    padding: 5px;
?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?);
}
a.menulink:hover {
    background-color:#6F9CC5;
    border-top: 1px none #FFFFFF;
    border-right: 1px none #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    border-left: 1px none #FFFFFF;
}
.titel {
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-family:arial;
    font-size:20px;
    color: #333333;
    font-weight: bolder;
    padding:5px 5px 0px;
    border: none;
}
p {
    width: 491px;
    text-align: justify;
    text-decoration: none;
    font-family:arial;
    font-size:12px;
    color: #000000;
    BORDER: none;
    font-weight: normal;
    padding: 0px 5px 5px;
}
.copyright {
    display: block;
    width: 246px;
    text-align: center;
    text-decoration: none;
    font-family:arial;
    font-size:10px;
    color: #333333;
    border: 1px none #FFFFFF;
    font-weight: normal;
    padding: 20px 5px;
    background-color: #FFFFFF;
}
.footer {
    display: block;
    text-align: center;
    text-decoration: none;
    font-family:arial;
    font-size:10px;
    color: #333333;
    font-weight: normal;
}
h1 {
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-family:arial;
    font-size:20px;
    color: #333333;
    font-weight: bolder;
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 5px;
    border: none;
}
h2 {
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-family:arial;
    font-size:12px;
    color: #000000;
    font-weight: bolder;
}
a.author {
    text-decoration: none;
    color: #CCC;
    float: right;
}
a.author:hover {
    text-decoration: none;
}

.hr {
    font-size: 0;
    height: 0;
    margin: 7px 0 7px 0;
    clear: both;
}
ul {
    list-style-type: square;
}
.image {
    background-color: #B2C3D5;
    float: right;
}
.frmobj {
    float: left;
    font-weight: bold;
    padding-top: 3px;
    width: 90px;
}
.frmtext {
    padding-left: 90x;
}
input,textarea,select {
    width: 491px;
    text-align: justify;
    text-decoration: none;
    font-family:arial;
    font-size:12px;
    color: #000000;
    BORDER: none;
    font-weight: normal;
    padding: 0px 5px 5px;
}
form {
    display: inline;
}
table {
    border-collapse: collapse;
}
#list table {
    width: 100%;
}
#list th {
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-family:arial;
    font-size:20px;
    color: #000000;
    font-weight: bolder;
}
#list td {
    vertical-align: top;
    padding: 5px;
}



Sig endelig til hvis i vil se anden kilde...
Avatar billede darkstylerdk Nybegynder
03. juni 2004 - 20:47 #2
Er der slet ingen herinde der kan den slags???
Avatar billede cjep Nybegynder
03. juni 2004 - 21:47 #3
Tror ikke det er dit stylesheet. De steder teksten står for tæt på border har du ikke et <p> tag rundt om .. det har du de øvrige korrekte steder. Prøv at brug <p> tag konsekvent, så retter det sig.
Avatar billede darkstylerdk Nybegynder
03. juni 2004 - 22:07 #4
men kan jeg ikke smide noget kode ind så det får samme virkning. Kan ikke smide <P> på da det jo ikke er 'enkelte' sider (news.display.php?id=3)
Avatar billede cjep Nybegynder
03. juni 2004 - 22:57 #5
Nu er jeg ikke stiv i php, men det burde nu ikke være det store at sætte tags på.. alternativt skal du inkluderet den padding du sætter i <p> på dit <body> tag i stedet, men det kan jo give padding utilsigtede steder. Problemet er at de du vil styre, har du ikke tags på, og så må du op på et højere niveau (body) for at få kontro.. husk at fjerne padding fra dit <p> tag, da det også er underlagt body...
Avatar billede skovenborg Nybegynder
04. juni 2004 - 00:03 #6
prøv at give den celle du har dit indhold i en class, fx:
<td colspan="2" valign="top" class="indhold"><h1>EU-debatmøde</h1><p><b>Som opt....

og skriv så i stylesheetet:
TD.indhold {
    padding:5px 5px 0px;
}
TD.indhold P,TD.indhold H1, TD.indhold H2 {
    padding:0px;
}

Det kan godt være du ligeså godt kan fjerne padding fra H1,H2 og P men det kan jo være du vil bruge dem andre steder
Avatar billede darkstylerdk Nybegynder
04. juni 2004 - 07:49 #7
Vil prøve det. Er snart tilbage.
Avatar billede darkstylerdk Nybegynder
04. juni 2004 - 07:56 #8
skovenborg havde fat i det rigtige mht. spm. 1 ("søg efte nyhed"s indretning. Du skal nok få points når resten er på plads.
Avatar billede darkstylerdk Nybegynder
04. juni 2004 - 07:57 #9
kan jeg få et konkret bud på koden til hvad der skal ske for at løse spm. 2?
Avatar billede darkstylerdk Nybegynder
04. juni 2004 - 10:04 #10
eller skal jeg poste i php-kategorien?
Avatar billede skovenborg Nybegynder
04. juni 2004 - 11:37 #11
det var sådan set et svar på spørgsmål to - det er i hvert fald den jeg har testet det på
Avatar billede skovenborg Nybegynder
04. juni 2004 - 11:40 #12
umiddelbart ser det også ud til at de ikke ligger for tæt på borderen både "Søg efter Nyhed" og http://radikale.users.whitehat.dk/news.display.php?id=3
ellers har jeg vel misforstået hvad du vil
Avatar billede darkstylerdk Nybegynder
04. juni 2004 - 18:04 #13
Skovenborg. Jeg har rettet siden til dit forslag. Defor ser det fint ud nu :) Du skal nok få points. Men jeg mangler svar på det snaet problem.
Det er http://radikale.users.whitehat.dk/news.display.php?id=3
der er problemer med nu. Siden 'udvider' cellen og det er DET jeg ikke kan fine ud af.  :(
Avatar billede darkstylerdk Nybegynder
04. juni 2004 - 18:07 #14
Det skal siges at 'udvidelses-fejlen' NÆSTEN ikke kan ses i 800X600, men højere opløsninger passer desværre ikke så godt til designet. OG DET SKAL DE!
Avatar billede darkstylerdk Nybegynder
04. juni 2004 - 18:12 #15
ikke ment som noget ondt mod jer. Men kan ikke skrive i <i>kursiv</i>
Avatar billede skovenborg Nybegynder
04. juni 2004 - 18:32 #16
nåå, troede bare problemmet var at teksten var for tæt på borderen.
Avatar billede darkstylerdk Nybegynder
04. juni 2004 - 20:02 #17
Det var d osse. Men det 2. problem  er at designet skal passe. Cellen må ikke udvide sig :)
Avatar billede darkstylerdk Nybegynder
04. juni 2004 - 20:05 #18
Kan godt oprette ENDNU et spm. men mener det vil tolkes som spam.
Du skal nok få points, men kan du ikke hjælpe med det andet?
Avatar billede darkstylerdk Nybegynder
04. juni 2004 - 21:16 #19
ellers læg svar så jeg kan oprette et nyt i php
Avatar billede skovenborg Nybegynder
04. juni 2004 - 23:56 #20
sorry - så lige en lille film (eller to ;-)

Jeg kan godt se problemmet, men tror ikke du skal oprette noget nyt spg. i PHP. Prøv i stedet at ændre lidt på din stylesheet:
p {
    width: 100%;
    text-align: justify;

Problemmet var før at du havde sat width til 491px som måske passede før, men med ekstra padding på så kan det give problemmer. Cellens samlede bredde skal du nemlig se som width+padding samt hvis du har en border eller margin
Avatar billede skovenborg Nybegynder
05. juni 2004 - 00:05 #21
noget helt andet er at du med fordel kan fjerne height="0" nederst:
<tr>
      <td colspan="3" valign="top" class="footer"> indhold &copy; 2004
      Svendborg Radikale Venstre -Alle rettigheder forbeholdes</td>

    </tr>

Bare så det ikke ser fuldstændig tosset ud i mozilla ;-)
Avatar billede darkstylerdk Nybegynder
05. juni 2004 - 00:09 #22
Nu ser det således ud: http://radikale.users.whitehat.dk
Avatar billede darkstylerdk Nybegynder
05. juni 2004 - 00:11 #23
Det gjorde blot at selv forsiden gik galt... :(
Avatar billede darkstylerdk Nybegynder
05. juni 2004 - 00:28 #24
Ingen forslag har virket indtil videre.
Nu har jeg startet 'forfra'
Vil tro det hele vil gå godt hvis jeg bare kan få "låst" den celle hvor teksten skal stå i.
Avatar billede skovenborg Nybegynder
05. juni 2004 - 00:30 #25
du kunne også sætte en fast bredde på din tabel:
<table width="750" border="0" height="0" cellpadding="0" cellspacing="5">
Avatar billede skovenborg Nybegynder
05. juni 2004 - 00:31 #26
om det skal være præcis 750px ved jeg ikke men det forhindrer da din celle i at blive alt for stor...
Avatar billede darkstylerdk Nybegynder
05. juni 2004 - 00:32 #27
}
TD.indhold {
    padding:5px 5px 0px;
}
TD.indhold P,TD.indhold H1, TD.indhold H2 {
    padding:0px;
}


her skal det nok laves.
Avatar billede skovenborg Nybegynder
05. juni 2004 - 00:38 #28
du kan prøve at tilføje:
TD.indhold {
    padding:5px 5px 0px;
    width:480px; /* Prøv at ændre lidt på den for at få det til at passe */
}
Avatar billede skovenborg Nybegynder
05. juni 2004 - 00:38 #29
det er i hvert fald en måde at begrænse cellens bredde - husk også lige at definere tabellens bredde som jeg skrev 05/06-2004 00:30:46
Avatar billede darkstylerdk Nybegynder
05. juni 2004 - 00:49 #30
men der kommer prblemer her... Højre border på hvert billeder er for stor:(
Avatar billede darkstylerdk Nybegynder
05. juni 2004 - 00:49 #31
hvordan kan dette ændres?
Avatar billede skovenborg Nybegynder
05. juni 2004 - 00:55 #32
er den for stor? Du har jo selv skrevet:
border-width:1px 2px 2px 1px;
i dit stylesheet og umiddelbart synes jeg også den ser ud til at være så stor
Avatar billede darkstylerdk Nybegynder
05. juni 2004 - 00:57 #33
hvad skal den så være?
Avatar billede skovenborg Nybegynder
05. juni 2004 - 00:59 #34
border-width:1px eller border-width:0px - du bestemmer ;-)
Avatar billede darkstylerdk Nybegynder
05. juni 2004 - 01:04 #35
prøver
Avatar billede darkstylerdk Nybegynder
05. juni 2004 - 01:07 #36
det hjælper ikke.
Til gengæld har jeg bemærket at det kun er de 2 billeder der er efter tekst-cellen (de kører parralelt)
Avatar billede skovenborg Nybegynder
05. juni 2004 - 01:14 #37
nu har du jo heller ikke ændret de andre ting jeg har skrevet fx <table width="750" //cirka
og
p {
    width: 100%;
i dit stylesheet
Avatar billede skovenborg Nybegynder
05. juni 2004 - 01:16 #38
og det her bør du nok også ændre:
input,textarea,select {
    width: 100%;

ellers hjælper det heller ikke meget at du har tilføjet:
TD.indhold {
    padding:5px 5px 0px;
    width:480px; /* Prøv at ændre lidt på den for at få det til at passe */
}
Avatar billede darkstylerdk Nybegynder
05. juni 2004 - 01:16 #39
her har du mit stylesheet.


kan du så ikke ændre det?


html,body{margin:0px;padding:0px;}
a,a:visited,a:hover{color:black;}
td {
    background-color: #B2C3D5;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
}
img {
    border:1px solid #B2C3D5;
    border-width:1px 2px 2px 1px;
    background-color:#B2C3D5;
}
a.menu {
    background-color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    font-weight: bold;
    border-bottom-width: 5px;
    border-bottom-style: solid;
    border-bottom-color: white;
}
a.menulink {
    display: block;
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-family:arial;
    font-size:14px;
    color: #333333;
    border: 0px;
    border-bottom: 1px solid #FFFFFF;
    font-weight: bolder;
    padding: 5px;
?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?);
}
a.menulink:hover {
    background-color:#6F9CC5;
    border-top: 1px none #FFFFFF;
    border-right: 1px none #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    border-left: 1px none #FFFFFF;
}
.titel {
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-family:arial;
    font-size:20px;
    color: #333333;
    font-weight: bolder;
    padding:5px 5px 0px;
    border: none;
}
p {
    width: 491px;
    text-align: justify;
    text-decoration: none;
    font-family:arial;
    font-size:12px;
    color: #000000;
    BORDER: none;
    font-weight: normal;
    padding: 0px 5px 5px;
}
.copyright {
    display: block;
    width: 246px;
    text-align: center;
    text-decoration: none;
    font-family:arial;
    font-size:10px;
    color: #333333;
    border: 1px none #FFFFFF;
    font-weight: normal;
    padding: 20px 5px;
    background-color: #FFFFFF;
}
.footer {
    display: block;
    text-align: center;
    text-decoration: none;
    font-family:arial;
    font-size:10px;
    color: #333333;
    font-weight: normal;
}
h1 {
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-family:arial;
    font-size:20px;
    color: #333333;
    font-weight: bolder;
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 5px;
    border: none;
}
h2 {
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-family:arial;
    font-size:12px;
    color: #000000;
    font-weight: bolder;
}
a.author {
    text-decoration: none;
    color: #CCC;
    float: right;
}
a.author:hover {
    text-decoration: none;
}

.hr {
    font-size: 0;
    height: 0;
    margin: 7px 0 7px 0;
    clear: both;
}
ul {
    list-style-type: square;
}
.image {
    background-color: #B2C3D5;
    float: right;
}
.frmobj {
    float: left;
    font-weight: bold;
    padding-top: 3px;
    width: 90px;
}
.frmtext {
    padding-left: 90x;
}
input,textarea,select {
    width: 491px;
    text-align: justify;
    text-decoration: none;
    font-family:arial;
    font-size:12px;
    color: #000000;
    BORDER: none;
    font-weight: normal;
    padding: 0px 5px 5px;
}
form {
    display: inline;
}
table {
    border-collapse: collapse;
}
#list table {
    width: 100%;
}
#list th {
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-family:arial;
    font-size:20px;
    color: #000000;
    font-weight: bolder;
}
#list td {
    vertical-align: top;
    padding: 5px;
}
TD.indhold {
    padding:5px 5px 0px;
    width:480px; /* Prøv at ændre lidt på den for at få det til at passe */
}
TD.indhold P,TD.indhold H1, TD.indhold H2 {
    padding:0px;
}
Avatar billede darkstylerdk Nybegynder
05. juni 2004 - 01:19 #40
jeg laver sikkert fejl ellers ;-)
Avatar billede skovenborg Nybegynder
05. juni 2004 - 01:35 #41
jo, det stylesheet jeg sider og roder med ser sådan her ud:
html,body{margin:0px;padding:0px;}
a,a:visited,a:hover{color:black;}
td {
    background-color: #B2C3D5;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
}
img {
    border:1px solid #B2C3D5;
    border-width:1px 2px 2px 1px;
    background-color:#B2C3D5;
}
a.menu {
    background-color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    font-weight: bold;
    border-bottom-width: 5px;
    border-bottom-style: solid;
    border-bottom-color: white;
}
a.menulink {
    display: block;
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-family:arial;
    font-size:14px;
    color: #333333;
    border: 0px;
    border-bottom: 1px solid #FFFFFF;
    font-weight: bolder;
    padding: 5px;
?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?);
}
a.menulink:hover {
    background-color:#6F9CC5;
    border-top: 1px none #FFFFFF;
    border-right: 1px none #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    border-left: 1px none #FFFFFF;
}
.titel {
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-family:arial;
    font-size:20px;
    color: #333333;
    font-weight: bolder;
    padding:5px 5px 0px;
    border: none;
}
p {
    width: 100%;
    text-align: justify;
    text-decoration: none;
    font-family:arial;
    font-size:12px;
    color: #000000;
    BORDER: none;
    font-weight: normal;
    padding: 0px 5px 5px;
}
.copyright {
    display: block;
    width: 246px;
    text-align: center;
    text-decoration: none;
    font-family:arial;
    font-size:10px;
    color: #333333;
    border: 1px none #FFFFFF;
    font-weight: normal;
    padding: 20px 5px;
    background-color: #FFFFFF;
}
.footer {
    display: block;
    text-align: center;
    text-decoration: none;
    font-family:arial;
    font-size:10px;
    color: #333333;
    font-weight: normal;
}
h1 {
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-family:arial;
    font-size:20px;
    color: #333333;
    font-weight: bolder;
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 5px;
    border: none;
}
h2 {
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-family:arial;
    font-size:12px;
    color: #000000;
    font-weight: bolder;
}
a.author {
    text-decoration: none;
    color: #CCC;
    float: right;
}
a.author:hover {
    text-decoration: none;
}

.hr {
    font-size: 0;
    height: 0;
    margin: 7px 0 7px 0;
    clear: both;
}
ul {
    list-style-type: square;
}
.image {
    background-color: #B2C3D5;
    float: right;
}
.frmobj {
    float: left;
    font-weight: bold;
    padding-top: 3px;
    width: 90px;
}
.frmtext {
    padding-left: 90x;
}
input,textarea,select {
    width: 491px;
    text-align: justify;
    text-decoration: none;
    font-family:arial;
    font-size:12px;
    color: #000000;
    BORDER: none;
    font-weight: normal;
    padding: 0px 5px 5px;
}
form {
    display: inline;
}
table {
    border-collapse: collapse;
}
#list table {
    width: 100%;
}
#list th {
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-family:arial;
    font-size:20px;
    color: #000000;
    font-weight: bolder;
}
#list td {
    vertical-align: top;
    padding: 5px;
}
TD.indhold {
    padding:5px 5px 0px;
    width:480px; /* Prøv at ændre lidt på den for at få det til at passe */
}
TD.indhold P,TD.indhold H1, TD.indhold H2 {
    padding:0px;
}
Avatar billede skovenborg Nybegynder
05. juni 2004 - 01:36 #42
og med en lille rettelse:
input,textarea,select {
    width: 100%;
    text-align: justify;
    text-decoration: none;
    font-family:arial;
    font-size:12px;
    color: #000000;
    BORDER: none;
    font-weight: normal;
    padding: 0px 5px 5px;
}
Avatar billede darkstylerdk Nybegynder
05. juni 2004 - 01:38 #43
Det var det    :D
Vil du lægge et svar? Og tusind tak for hjælpen
Avatar billede skovenborg Nybegynder
05. juni 2004 - 01:39 #44
puha - det var godt. Det trak lidt ud efterhånden ;-)
Avatar billede skovenborg Nybegynder
05. juni 2004 - 01:39 #45
og her er svaret ;-)
Avatar billede darkstylerdk Nybegynder
05. juni 2004 - 01:41 #46
skovenborg har fortjen lidt mere.
Avatar billede skovenborg Nybegynder
05. juni 2004 - 01:44 #47
jamen tak for points :-)
Avatar billede darkstylerdk Nybegynder
05. juni 2004 - 11:42 #48
selv tak.
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