Gå til innhold

Hjemmeside, tilbakemelding, hjelp med div/css

spock84

Anbefalte innlegg

spock84

spock84

Skrevet
Skrevet (endret)

Bestemte meg for å prøve å følge med i utviklinga og kutte ut tabell-designen min. Har ikke full kontroll på css enda, men det kommer seg. ;) Vil fortsette å bruke tabeller til bildegalleri og lignende ei stund til.

 

Ny design:

http://folk.ntnu.no/kleming/ny/ (kun startsida som funker)

 

Tittelen/headeren vil antageligvis bli litt tøffere etter hvert.

 

Sida vises korrekt i Firefox og Opera, men IE støtter ikke css-attributtene min-height/min-width etc. og roter dermed til en del greier. I IE (i hvertfall hos meg) er det heller ikke støtte for transparente png-filer. Tror jeg driter i å bry meg om hvordan den ser ut i IE..

 

Så, meninger?

Endret av spock84
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
spock84

spock84

Skrevet
  • Forfatter
Skrevet (endret)

Ordna linjeavstanden. Det ser penere ut nå. Takk for tipset.

 

Ellers fungerer også kategori- og bildevisningssidene sånn som de skal nå. Jeg har også lagt inn en navigasjons-bar. Det eneste jeg for øyeblikket ikke fatter er hvordan jeg kan posisjonere to div'er ved siden av hverandre inni en annen div, se på kommentar-delen på bildesida. For f.eks. hovedelementene på startsida har jeg brukt float for å gjøre dette, men her ender bare inni-div'ene utenfor den diven de egentlig ligger inni, den strekker seg ikke slik som en tabell ville. Sikkert et vanlig nybegynner-problem, men om noen kan forklare hvordan jeg gjør, så hadde jeg satt pris på det! ;) Jeg vil ha kommentarene til høyre for skjemaet.

 

<div id="piccomment">
  <div id="comments">
     [siste fem kommentarer]
  </div>
  <div id="commentform">
     [skjema]
  </div>
</div>


hvor

#piccomment{
  clear:both;
  width:100%;

  ... etc.
}

 

For puristene her, er det alternativt greit å bruke en tabell i sånne tilfeller?

Endret av spock84
Lenke til kommentar
spock84

spock84

Skrevet
  • Forfatter
Skrevet

Dødplassen kommer av en del server-side scripts som includeres nettopp der og de tomme linjene jeg har der må nesten være der for at det skal være oversiktlig for meg. Sitter for øyeblikket å leter etter bedre ikoner, men det er ikke helt enkelt å finne noe passende. Har ikke snøring på å lage dem sjøl.

Lenke til kommentar
JensViking

JensViking

Skrevet
Skrevet
Ordna linjeavstanden. Det ser penere ut nå. Takk for tipset.
Tror du misforstod litt, men du er i hvert fall på rett spor... Jeg mente lenger avstand/mer skille mellom de forskjellige innleggene, slik at det blir mer oversiktlig å se innlegg fra forskjellige datoer.
Lenke til kommentar
Nano-

Nano-

Skrevet
Skrevet
Your browser sucks! Please use FireFox, Opera or some other browser with proper CSS-support to view this site.

- Selv om jeg er helt enig i at IE suger, synes jeg likevel IE-brukere (som for eksempel meg på skolen) burde kunne se siden. Selv om den måtte se litt loka ut :roll:

Lenke til kommentar
spock84

spock84

Skrevet
  • Forfatter
Skrevet

Har heller lagt inn en advarsel på startsida om man bruker IE, men for all del, om noen vet hvordan jeg i det minste kan kompensere for mangelen på min-height attributten så setter jeg pris på det! :yes:

 

 

Og du burde definitivt godta oss med Opera som identifiserer som MSIE (HTTP_HEADER inneholder vel uansett Opera ;))

6206640[/snapback]

 

Hvilken versjon er det som gjør det? Tror uansett det skal fungere nå.

Lenke til kommentar
bosannes

bosannes

Skrevet
Skrevet (endret)

For all del, ikke si at "jeg driter i hvordan den ser ut i IE". IE6 er fortsatt verdens mest brukte nettleser, og selve poenget med webben er at den skal være tilgjengelig fra flest mulig plattformer.

 

For å kompensere min-width/min-height i IE6 kan du gjøre slik:

 

width: auto !important;
height: auto !important;
width: 400px;
height: 300px;
min-width: 400px;
min-height: 300px;

IE skjønner nemmelig ikke !important, og dermed settes det bredde og høyde i steden. IE tolker også width/height min-width/height, så med mindre du har angitt overflow bør det gi deg hva du er ute etter.

 

Kommer sikkert noen og sier at du heller bør bruke conditional statement

<!--[if IE 6]>
<style......../<link....
<![endif]-->

Opp til deg. Koster deg noe mer jobb, men er mer "riktig".

 

 

 

IE har støtte for 1-bit gjennomsiktighet i png, altså kun <8-bit png, og ikke alpha-lag i 24/48-bits png.

 

Om det er 24-bits du bruker til grafikk, så gjør dette:

-Åpne i Photoshop

-Save for web (Ctrl + Alt + Shift + S)

-Velg PNG -> 256 Colors og hak av for gjennomsiktighet.

 

Du bør nå ha grafikk som fungerer i IE.

 

Desverre gjør 1-bits gjennomsiktigheten at du risikerer en stygg kant rundt bildet ditt.

I ditt tilfelle ville jeg derfor ha satt i header-teksten i header-bildet (Tar jo bare ekstra kB slik det er nå). Til ikonene kan du jo bare sette samme bakgrunnsfarge som på listebakgrunnen.

Endret av bosannes
Lenke til kommentar
spock84

spock84

Skrevet
  • Forfatter
Skrevet (endret)
For all del, ikke si at "jeg driter i hvordan den ser ut i IE". IE6 er fortsatt verdens mest brukte nettleser, og selve poenget med webben er at den skal være tilgjengelig fra flest mulig plattformer.

 

Ja, men er det min feil at firma kjører sitt eget løp og driter i alt av standarder og anbefalinger? :p Synes seriøst alt av webdesignere burde begynne å drite i å fikse sidene for IE, så tar kanskje Microsoft hintet. Kanskje en litt vel optimistisk tanke..

 

For å kompensere min-width/min-height i IE6 kan du gjøre slik:

 

width: auto !important;
height: auto !important;
width: 400px;
height: 300px;
min-width: 400px;
min-height: 300px;

IE skjønner nemmelig ikke !important, og dermed settes det bredde og høyde i steden. IE tolker også width/height min-width/height, så med mindre du har angitt overflow bør det gi deg hva du er ute etter.

 

Takk. Den fungerte fint. :thumbup:

 

Desverre gjør 1-bits gjennomsiktigheten at du risikerer en stygg kant rundt bildet ditt.

 

Ja, ikke sant. Da forsvinner jo hele poenget spør du meg.

 

 

I ditt tilfelle ville jeg derfor ha satt i header-teksten i header-bildet (Tar jo bare ekstra kB slik det er nå). Til ikonene kan du jo bare sette samme bakgrunnsfarge som på listebakgrunnen.

6213630[/snapback]

 

Kan selvsagt gjøre det med headeren, men med ikonene må jeg jo lage dobbelt opp for å få samme effekten (endrer bakgrunnsfargen i img:hover). Blir også et problem med bakgrunnene som jeg da ville måtte endre bakgrunnsfargen i hver gang jeg eventuelt skulle finne på å endre fargene på sida.

 

 

Men om jeg nå likevel skulle ordne sida sånn at den fungerer ordentlig i explorer så trenger jeg hjelp med følgende:

 

- <br /><br /> blir kun ett linjeskift, ingen blank linje mellom. [LØST]

- bildene i menyen til høyre ligger ikke helt inntil kanten til høyre, selv om padding i boksen/diven er satt til 0

- baren nederst i menyen legger seg ikke helt nede [LØST]

- menyen klistrer seg inntil hovedinnholdet på sida og mellomrommet mellom menyen og høyre kant er mye større enn det jeg har definert [LØST]

- bakgrunnen i #main (som omfatter alt under ikon-menyen med unntak av footeren) starter altfor langt ned på sida [LØST]

- det er for stort mellomrom mellom de tre første boksene på startsida (ie, info, news) uten at jeg ser noen grunn til at det skal være sånn [LØST]

- ikonene har et lite mellomrom til kanten over [ikke løst, men gjør ingenting]

Endret av spock84
Lenke til kommentar
spock84

spock84

Skrevet
  • Forfatter
Skrevet (endret)

^bump

 

Beklager tullete holdning tidligere. :blush:

 

Har nå bare to små problemer igjen i IE. Bildene i menyen til høyre legger seg ikke helt til høyre og den nederste div-en blir større enn det jeg har definert den til.

 

<div id="menu">
  <div class="sepbartop"></div>
     <div class="catbox">
        <a href=""><img src="" alt="" class="catimg" /></a>
        <p><span class="header">Tittel.</span> Tekst, beskrivelse.</p>
  </div>

[...]

  <div class="sepbarbottom"></div>
</div>


hvor

#menu{	
padding:0px;
margin-right:15px;
background: #dadde2;
width:29%;
float:right;
display: inline;
border: 1px #666;
border-style: none solid;
}
#menu p{
margin-top:10px;
margin-left: 15px;
}
.sepbartop{
background: url(sepbar.gif) repeat-x;
border:1px #666;
border-style: solid none none none;
padding:0px;
height:12px;
margin-bottom:10px;
}
.sepbarbottom{
background: url(sepbar.gif) repeat-x;
background-position:bottom;
border:1px #666;
border-style: solid none none none;
padding:0px;
height:12px;
}
.catbox{
background: #f0f2f5;
padding:0px;
border:1px #666;
border-style: solid none;
margin-bottom:10px;
height: auto !important;
height:98px;
min-height:98px;
min-width:99px;
}
.catimg{
float:right;
border:0px;
}

 

Ah. Og sida er nå på http://folk.ntnu.no/kleming/

Endret av spock84
Lenke til kommentar
bosannes

bosannes

Skrevet
Skrevet (endret)

Mulig den sprekken oppstår fordi img står inni en a, som jo er inline. Prøv så her:

 

.catbox{
background: #f0f2f5;
padding:0px;
border:1px #666;
border-style: solid none;
margin-bottom:10px;
height: auto !important;
height:98px;
min-height:98px;
min-width:99px;
text-align: right;      /* Den nye linja */
}

.catbox img{      /* Så slipper du å definere class for hvert bilde */
display:inline;
border:0px;
}

Endret av bosannes
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...