Layout i ren CSS er så utrolig frustrerende av og til (trenger hjelp)

[Autodidact]

Vanligvis når jeg gå i gang med en grafisk mal for nettsider, tenker jeg ikke så veldig mye på utfordringer p.g.a. begrensninger og problemer i CSS — og eventuelt min noe begrensede kunnskap om emnet.

 

Når folk pusher CSS uber alles og tabeller nærmest er like uakseptabelt som meninger mot høyre i politikken, sliter jeg litt med å nå mål. Det finnes jo masser av hacks p.g.a. forskjell mellom nettlesere, men jeg har ingen formening om å bli god på det området og har ikke luksusen av å bruke all tid jeg trenger til å finne ut av alt — som tidvis krever komplekse tyggis og tape løsninger.

 

Egentlig trenger jeg kanskje tidvis en fast "CSS-mentor", for det er ikke alltid like lett å få ting til å oppføre seg som tiltenkt/forventet — i alle fall ikke uten å bruke unødig mye tid. Ser gjerne for meg å diskutere belønning for innsatsen ...

 

Anyway — her er et ting jeg trenger å finne ut av / løse;

 

• Jeg må ha hvit bakgrunn i sidebar-div'en selv om den er kortere enn content-div'en — og omvendt når det er tilfelle.

• Ønsker å ha noen elementer som alltid er nederst i sidebar-div'en (uten javascript), uansett hvor mye luft det er mellom.

 

En alternativ løsning på første punkt, som tidvis er mer ønskelig, er å ha footeren-div'en nederst på siden, og likevel kunne ha hvit bakgrunn under hele content-området selv om headeren ikke nødvendigvis ligger helt i topp på siden.

 

Her er "layout.css";

 

 

.container {
width: 950px;

margin-top: 30px;
margin-right: auto;
margin-left: auto;

background-color: #FFF;
}

.header{
width: 100%;
height: 125px;

padding-bottom: 0px;

background-color: #EC118F;

}

.menu{
width: 100%;
height: 50px;

background-color: #EC118F;
}

.marker{
width: 100%;
height: 15px;

background-color: #FFF;
}

.contentarea{
background-color:#FFF;
min-height:500px;
}

.content {
width: 620px;
min-height:485px;
float: left;
margin-right: 14px;
background-color: #FFF;

border-right: thin;
border-right-style: solid;
border-right-color: #F8BBD5;
}

.sidebar {
width: 315px;
height: 100%;

float: left;

background-color: #FFF;
}

.footer{
width: 100%;
height: 100px;

clear:both;
float: left;

background-color: #EC118F;
}

 

 

 

Og basisen i malen (mest mulig unødig er strippet);

 

 

 

	<div id="container" class="container">

       <div id="header" class="header">
               <img src="..." width="165" height="125" border="0" />
               <img src="..." width="620" height="125" border="0" />
               <img src="..." width="165" height="125" border="0" />
       </div>

       <div id="menu" class="menu">
           <div id="menu" class="MenuContainer">
               <UL>
               </UL>
           </div>
       </div>

       <div id="marker" class="marker">
           <img src="..." width="<%=MarkerPos%>" height="8" /><br />
           <img src="..." width="15" height="8" />
       </div>        

       <div id="contentarea" class="contentarea">
           <div id="content" class="content">

               <!-- TemplateBeginEditable name="content" -->
                   <p> ...</p>
               <!-- TemplateEndEditable -->

           </div> 

       <div id="sidebar" class="sidebar">
           <h3 class="SidebarHeading">Nytt(ig) og interessant</h3>
           <img src="..." width="314" height="15" />

           <!-- TemplateBeginEditable name="sidebar" -->
                   <p> ...</p>
           <!-- TemplateEndEditable -->

           <!--#include file="../res/sidebar.asp" -->

       </div>         
</div>

<div id="footer" class="footer">
</div>

 

 

 

Bildet er også strippet for detaljer for oversiktens skyld.

[Gjest Slettet+9871234]

Når folk pusher CSS uber alles og tabeller nærmest er like uakseptabelt som meninger mot høyre i politikken, sliter jeg litt med å nå mål. Det finnes jo masser av hacks p.g.a. forskjell mellom nettlesere, men jeg har ingen formening om å bli god på det området og har ikke luksusen av å bruke all tid jeg trenger til å finne ut av alt — som tidvis krever komplekse tyggis og tape løsninger.

Tabeller skal brukes til tabulart innhold, eksempelvis bilder.

 

Egentlig trenger jeg kanskje tidvis en fast "CSS-mentor", for det er ikke alltid like lett å få ting til å oppføre seg som tiltenkt/forventet — i alle fall ikke uten å bruke unødig mye tid. Ser gjerne for meg å diskutere belønning for innsatsen ...

Kan denne http://www.sitepoint.com/books/design2/ boken være en billig slik mentor?

 

Artikkel http://www.sitepoint.com/principles-beautiful-web-design/ om du ikke vil lese hele boken.

 

Se fremover med denne: http://www.sitepoint.com/books/htmlcss1/

 

Hva med å bruke en blog platform som WordPress eller et CMS system som Drupal der CSS styling til dels er abstrahert bort?

[Autodidact]

Jeg har så vidt kikket på CMS-løsninger relativt nylig, men det tar tid — relativt uproduktiv tid som jeg ofte ikke finner nok av. Et kriterie er forøvrig at løsningen bygger kjører på IIS / bygger på ASP og ikke PHP (med mySQL) som Drupal og Wordpress. Jeg er ikke på markedet for å bytte utviklings-språk — det strekker i alle fall ikke tiden til for. Ikke er det hensiktsmessig med tanke på komponenter jeg bruker for bl.a. PDF-generering og andre plasser hvor VBA/Basic er eneste tilgjengelige utviklings-språk. VBscript/VB/ASP/VBA er ganske utbredt og svært nyttig å kunne, så mitt (profesjonelle) valg falt på det for mange år siden.

 

Det lengste jeg strekker meg til med tanke på andre utviklings-språk er JavaScript for litt mer klient-koding, (som til nå stort sett har blitt med flikking på ting andre har laget om det ikke har kunnet blitt løst med server-side kode) og Enyo rammeverket på webOS platformen — som jeg har "forelsket" meg helt i.

 

Det er forøvrig ikke så ofte jeg føler for å slippe kontrollen på ting og klarer å leve med å sitte utenfor boksen, så jeg er ikke sikker på om jeg kommer til å ende opp med et langt kjærlighetsforhold med noe CMS-system når alt kommer til alt. Blir vel kanskje samme erfaring som med grid-systemer; for lite kontroll og fleksibilitet.

 

Siden den første boka går på design, får jeg ta tipset som et subtilt hint om at du syntes den rosa malen var "far off". 8o) Men, sånn blir det når man har retninger trukket opp før man begynner. Man får ikke alltid luksusen av å begynne fra scratch med store mengder (kreativ) frihet.

 

Litt dypere dykk i HTML5 og CSS3 står på menyen så den boka fant jeg mer interessant, etter boka om CSS jeg holder på med. Men det blir ikke helt enda siden min oppfatning er at verden ikke er helt klar de for teknologiene. Siden publisering ikke er så langt unna, så er ikke bøker den beste løsningen for meg nå. Nødløsningen er å blande litt tabeller inn i formelen også, selv om "resten av verden" synes det er helt galt. 8o)

 

Anyway, takk for fin input!

[Gjest Slettet+9871234]

Ok, da får vi vel si som klienten som kom til investeringsrådgiveren og ba om høyere risiko på kommunens finansinvesteringer.

 

Da har ikke vi mer å snakke om svarte investeringsrådgiveren

Endret 27. juli 2011 av Slettet+9871234