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.
Annonceindlæg fra SuperOffice
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...
Er der slet ingen herinde der kan den slags???
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.
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)
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...
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
Vil prøve det. Er snart tilbage.
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.
kan jeg få et konkret bud på koden til hvad der skal ske for at løse spm. 2?
04. juni 2004 - 10:04
#10
eller skal jeg poste i php-kategorien?
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å
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. :(
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!
04. juni 2004 - 18:12
#15
ikke ment som noget ondt mod jer. Men kan ikke skrive i <i>kursiv</i>
04. juni 2004 - 18:32
#16
nåå, troede bare problemmet var at teksten var for tæt på borderen.
04. juni 2004 - 20:02
#17
Det var d osse. Men det 2. problem er at designet skal passe. Cellen må ikke udvide sig :)
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?
04. juni 2004 - 21:16
#19
ellers læg svar så jeg kan oprette et nyt i php
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
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 © 2004 Svendborg Radikale Venstre -Alle rettigheder forbeholdes</td> </tr> Bare så det ikke ser fuldstændig tosset ud i mozilla ;-)
05. juni 2004 - 00:09
#22
05. juni 2004 - 00:11
#23
Det gjorde blot at selv forsiden gik galt... :(
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.
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">
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...
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.
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 */ }
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
05. juni 2004 - 00:49
#30
men der kommer prblemer her... Højre border på hvert billeder er for stor:(
05. juni 2004 - 00:49
#31
hvordan kan dette ændres?
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
05. juni 2004 - 00:57
#33
hvad skal den så være?
05. juni 2004 - 00:59
#34
border-width:1px eller border-width:0px - du bestemmer ;-)
05. juni 2004 - 01:04
#35
prøver
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)
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
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 */ }
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; }
05. juni 2004 - 01:19
#40
jeg laver sikkert fejl ellers ;-)
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; }
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; }
05. juni 2004 - 01:38
#43
Det var det :D Vil du lægge et svar? Og tusind tak for hjælpen
05. juni 2004 - 01:39
#44
puha - det var godt. Det trak lidt ud efterhånden ;-)
05. juni 2004 - 01:39
#45
og her er svaret ;-)
05. juni 2004 - 01:41
#46
skovenborg har fortjen lidt mere.
05. juni 2004 - 01:44
#47
jamen tak for points :-)
05. juni 2004 - 11:42
#48
selv tak.
Vi tilbyder markedets bedste kurser inden for webudvikling