Hur ser min kod ut? bra eller åt ..........

[Rickard.v]

Grejer med min nya design.

 

Kolla i koden om det ser ok ut, snälla ni som kan.

 

Nu är jag osäker på om de vita textrutorna som kallas container ligger rätt i koden.

De flyter liksom ovanför bakgrundsbilden som är en container också.

 

Lyckades inte få allt på rätt ställe när bakgrundscontainer var centrerad i webfönstret.

 

Vill gärna det men nu är de injusterade med absolut position.

 

Hjäääälp

 

Fattar ni något av vad jag menar??

 

http://www.rickardv.se

[jespersultan]

Du kan använda samma container mer än en gång, behöver inte använda #container1, 2, 3 osv. Om du behöver formatera en specifik använd istället en klass på samma div. Ex: <div id="container" class="specifik">

 

I klassen kan du ha din positionering. Tips, kolla runt på andra sidor för olika sätt att positionera dina containers på, istället för position:absolute; T.ex. kan du använda en wrapper runt hela sidan och sedan dela in innehållet i 3 kolumner där dina divar flyter på rätt plats utan position:absolute;

 

Samma sak med innehållet i divarna, istället för absolut positionering försök få en storlek på hela containern, sen tryck in resten i samma container.

 

Blev lite klyddigt där men hoppas det hjälper.

[Rickard.v]

Jag tror jag förstår vad du menar o lite som jag tänkte att de vita containers sitter ihop på något vis istället för som nu.

 

Men du måste nog förklara väldigt noga om jag ska förstå det tekniska.

Jag kan nästan ingenting tänk på det.

 

Men eftersom de ligger på olika ställen så måste jag väl speca containers som nu.

 

Men inte med tekniken du föreslog?

[jespersultan]

Tänk dig att du har en yttre osynlig container (content-wrap) som binder ihop allt i den vita boxen. Inne i den kan du placera alla andra divar. Containern med den vita bakgrundsbilden. Innuti den placerar du din text eller en eventuell div samt en divklass med din bakgrundsbild.

 

<div id="content-wrap"> <!-- Yttre osynlig wrapper som binder allt samman -->
<div id="container"> <!-- Inre wrapper med den rundade vita bakgrunden -->
	<div class="content"> <!-- Eventuell klass för padding etc -->

		<div class="category-img"></div> <!-- Bilden (VW-loggan etc) -->

		<h3>Texten här</h3>

	</div>
</div>
</div>

 

 

Hoppas detta var tydligare. Lycka till!

[Gerhard]

Du kan använda samma container mer än en gång, behöver inte använda #container1, 2, 3 osv. Om du behöver formatera en specifik använd istället en klass på samma div. Ex: <div id="container" class="specifik">

 

 

Nu tror jag nog att du har blandat ihop id och class. Det borde snarare se ut såhär, såvida jag inte har missförstått dig helt:

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

 

Ett id används för att peka ut ett specifikt element, och får bara lov att användas en gång.

[jespersultan]

Jo du har helt rätt.

[Majkeel2]

Tyvärr tycker jag inte koden ser alls bra ut.

Den är inte bra formaterad och du använder för kryptisk kod för att jag tror att ens du själv ska komma ihåg vad varje div och kodsnutt innebär om du skulle vilja ändra på sidan om någon vecka.

 

Tekniken du använder för att få rundade kanter är starkt att du orkat sitta och pilla med det, men tyvärr helt onödig.

Du borde använda en t.ex. png- eller gif-bakgrund.

 

Du kan använda gif eftersom du ändå inte ska använda någon kantutjämning

 

Tex:

Istället för att skriva

<div class="roundbottom">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>

 

Så hade det räckt att bara använda

<div class="roundbottom"></div>

 

och ge den en bakgrundsbild med rundade hörn

 

Det är mycket mer, men orkar tyvärr inte gå igenom allt:/ Men gör det inte så omständigt när du skriver kod. Försök att skriva så simpelt som möjligt. Och OM du vill ha kryptisk så bör du använda kommentarer eller liknande;)

[Rickard.v]

Jag har inte pillat alls mycket med runda hörn. Bara cmd+c > cmd+v

 

Gif bilder är ju omodernt. Detta är ju bättre. Eller?

 

Ändra vill jag inte göra. Sidan innehåller så mycket så ändringar undviker jag.

Designen jag byter ut är från början av 2000 med bara html.

 

Mycket av det kryptiska gör nog dreamviewer.

 

exakt vad är kryptiskt??

Ordningen eller vad.

Kod måste ju finns för att skapa utseendet.

[Majkeel2]

Jag har inte pillat alls mycket med runda hörn. Bara cmd+c > cmd+v

 

Gif bilder är ju omodernt. Detta är ju bättre. Eller?

 

Ändra vill jag inte göra. Sidan innehåller så mycket så ändringar undviker jag.

Designen jag byter ut är från början av 2000 med bara html.

 

Mycket av det kryptiska gör nog dreamviewer.

 

exakt vad är kryptiskt??

Ordningen eller vad.

Kod måste ju finns för att skapa utseendet.

Jag skulle säga att gif-animationer är det som är omodernt istället. Men annars kan du använda .png-bilder. Då blir det också snyggare:) Kanterna blir mer "utjämnade". Om du kollar nära på dina hörn nu så ser du att det är lite pixligt/kantigt.

(använd även png istället för gif på produktbilderna. Du kommer att gilla skillnaden)

 

En hemsida måste alltid kunna ändras;) Jag ska inte säga åt dig hur du ska sköta din sida men det är alltid bra att ha en uppdaterad sida som ändras lite då och då Bra för både användarna och sökmotorer.

 

Och om jag förstod rätt då vill du inte ändra för att det är så mycket kod. Man hade nog kunnat dra ner på din kod till ungefär en fjärdedel/femtedel, och om man då även formaterade koden med tabs och så, då hade det vart skitsmidigt att ändra den:)

 

Det kryptiska är kod som "container3", "apDiv5".

Ibland skriver du "roundtop" och liknande, och det är bra. Förstår du skillnaden?

 

Men detta är inte så farliga saker egentligen. Bara jag som är lite petig! Säger bara detta så att det blir enklare om sidan behöver redigeras i framtiden.

 

Den här koden:

<h1 align="center"><img src="bild/Bakgrund2.jpg" width="800" height="63" /></h1>

är dock onödig.

 

<h1> betyder rubrik, och du bör använda css för att redigera utseende. Inte heller blanda stora och små bokstäver på filnamn. Kör helst bara med små

Nu ska jag sluta vara petig

[Rickard.v]

Ja jag vet att det blir kantigt med flera boxar. Men jag gillar det istället för att ladda massa småbilder.

 

Nej jag förstår inte skillnaden. på koden.

 

I båda fallen är det dreamviewer som skriver namnen o jag har lagt till en siffra för att veta vilken som är vilken.

 

Du behöver inte vara petig.

 

Du vill finslipa altanen när jag funderar hur man ska resa väggarna till huset. En exempel på hur långt ifrån varann vi är.

[silentium]

De flyter liksom ovanför bakgrundsbilden som är en container också.

 

Lyckades inte få allt på rätt ställe när bakgrundscontainer var centrerad i webfönstret.

Jag misstänker att det problem du menar är att dina "boxar" hamnar till vänster på sidan när du väljer att centrera backgrunden.

Orsaken till detta är pga av att varje "box" i CSS filen har tex "left: 10px; top: 20px;" osv. Se nedan:

 

#container4 {
background:none repeat scroll 0 0 #FFFFFF;
left:353px;
margin:0;
position:absolute;
top:320px;
width:273px;
}

Steg 1

Så första steget är att ta bort dessa. top och left från CSS:en. Men nu kommer "boxarna" att hamna ovanpå varandra mm.

 

Steg 2

För att slippa att rutorna hamnar ovanpå varandra behöver vi ta bort position:absolute; från alla rutor och bilder. När det är gjort kommer allt att hamna i en lång lista.

 

Steg 3

För att få "boxarna" att åter igen hamna bredvid varandra behöver du ange float:left; till dem i CSS filen. Det gör att de "flyter" efter varandra åt vänster. Eftersom backgrunden har en fast bred på 980px kommer boxarna att hamna på nya raden så fort de inte får plats inom dessa 980px. Därför borde du få dina rader ungefär som de var innan när sidan inte var centrerad.

Kommer även att behövas fixas lite med padding och margin för att få det mellanrum du vill ha mellan boxarna.

 

Övrigt

Något som inte kommer att komma på sin placering är dina bilder på tex kamera, iMac osv. Exakt hur du ska gå tillväga med dessa har jag inte tid att kolla upp just nu men hoppas i alla fall att detta första löser det större problemet för dig.

[Rickard.v]

JAg börjar fatta lite faktiskt. Har gjort en ny sida nu som ligger uppe.

O där tog jag bort absolut o börjar förstå att de måste ligga i rätt ordning i koden för att det ska bli bra.

En absolut blev det på texten till vänster. Annars kunde den inte ligga ut över den vita textrutan, men det slutade med att jag tyckte det ser bäst ut utan att den går in över det vita ytan.

 

Tänkte tillverkar en docka övers på sidan men hur fixar man rollover image på ett moderna vis?? Inte så avancerat tack

[silentium]

Ja, det beror lite på då det finns olika sätt.

 

Om den ska likna tex dockan i OS X med olika ikoner som rör sig som i OS X där är det avancerat Det blir även genast mer avancerat när man  använder olika bilder.

 

MEN.

 

Om jag förstått rätt använder du Dreamweaver. Detta program har en inbyggd funktion för att på ett enkelt sätt skapa roll-over-images i tex menyer. Detta var en gammal guide, men den fungerar hyfsat även idag: http://www.developin...er/rollover.php

[Rickard.v]

Ja jag kör DW men jag får det inte att fungera. Jag har gjort som i guiden du länkar till.

 

Behöver inte vara så avancerat, tänkte bara göra rollover bilder några pixlar större o ljusare så man ser att något händer när man är där med musen.

[jespersultan]

Om du ska ha rollover på text skriver du tex.

 

a:hover
{
color:#999;
}

 

[Rickard.v]

Nu har jag gjort en början på min docka. Hittade ett javascript......

 

Kolla!

 

åsikter behöver jag väl inte fråga om......

[silentium]

Ja, en mycket enkel "rollover" meny kan man få genom bara lite CSS. Detta gör att man slipper javascript och personer som har inaktiverat javascript kan också använda menyn.

 

CSS koden:

    #mainnav {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    }
    
    #mainnav li {
    display: inline;
    float: left;
    margin: 26px 0 0 0;
    padding: 40px 0 40px 0;
    border-left: 1px solid #999;
    }

    #mainnav ul {
    list-style: none;
    margin: 0;
    }

    #mainnav li:last-child {
    display: inline;
    float: left;
    margin: 26px 0 0 0;
    padding: 40px 0 40px 0;
    border-right: 1px solid #999;
    }

    #mainnav a {
    color: #000;
    padding: 40px 30px 39px 30px;
    text-decoration: none;
    background: #666;
    }

    #mainnav a:hover {
    color: #248acb;
    background: #c9c9c9;
     }

 

 

och i html/php filen behöves endast en liten UL lista:

 

<ul id="mainnav">
<li><a href="#">alternativ 1</a></li>
<li><a href="#">alternativ 2</a></li>
 <li><a href="#">alternativ 3</a></li>
</ul>

 

Den menyn du får fram med denna kod liknar menyn jag har på min egna sidan,DarkWhispering.com, men som är lite enklare. Det ska bara vara att byta ut "alternativ 1" osv till 

 

 <img src="minbild.gif" alt="" />

 

inom

 

 <a href="#"><img ... /></a>

 

för att få bilder istället för text.

 

 

 

/ Mattias

[Rickard.v]

Nackdelen med css menyer med bilder är väl att rolloverbilderna inte förladdas har jag läst.

[jespersultan]

90% eller mer av alla rollover menyer är gjorde i ren CSS så det är knappast något man behöver oroa sig för. Upplever ibland att det tar ett ögonblick att ladda en ny bakgrundsbild vid rollover, men det är en så kort tid att det knappt märks, plus att det enbart är första bilden.

[Wargen41]

Nackdelen med css menyer med bilder är väl att rolloverbilderna inte förladdas har jag läst.

Du kan ju alltid ha ett separat javascript som förladdar bilderna om det visar sig vara ett problem.

[Rickard.v]

Så ni tycker jag ska byta ut mitt javascript jag hittade mot css??

 

Till det som silentum skrev i tråden. Det var klockrent. sånt uppskattar en amatör. Hoppas jag får det att fungera.

 

Mina små bilder jag använder är 5-8kb. (gif)

[silentium]

Nackdelen med css menyer med bilder är väl att rolloverbilderna inte förladdas har jag läst.

Om du lägger in bilder som jag skrivit ovan laddas de som vilka andra bilder som helst på sidan. Och det är endast första gången som någon besöker sidan som det kommer ta någon sekund längre tid att ladda bilderna, sen ligger de i besökarens cache.

 

Så ni tycker jag ska byta ut mitt javascript jag hittade mot css??

 

Till det som silentum skrev i tråden. Det var klockrent. sånt uppskattar en amatör. Hoppas jag får det att fungera.

 

Mina små bilder jag använder är 5-8kb. (gif)

 

Jag svara JA på den frågan om javascript. Jag försöker alltid att först använda så mycket CSS jag kan innan jag börjar använda javascript.

 

Som ovan, de laddas som vanliga bilder och eftersom de är så små som du skriver kommer endast besökare med sämre uppkoppling märka av att det tar någon sekund mer än om det bara varit text.

 

Tack för de trevliga orden. Var ju själv en amatör en gång i tiden och allt jag kan idag har jag lärt mig själv via guider och forum

 

 

[Rickard.v]

Nu håller jag på lägger in koden.

 

O bilderna ser jag men var lägger jag in onmouse bilden??

 

Jag vill ju centrera mina meny bilder. hur gör jag då?

 

Undrar lite vad display gör?

 

Det är ju en hel del kod jag kan ta bort efterosm jag bara har bild o ingen text.

 

Kan man lägga in alt text på dessa bilder? (text som visas när musen är över)

[silentium]

• Vill du ha "onmouse" eller mouseover som det heter är det är det javascripts som gäller för att kunna ladda en annan bild. Det min kod kan göra är att endast ha en sorts bild men tex ange en annan bakgrundsfärg bakom eller tex en border när man håller musen över.

• Centrera den har du redan lyckats med på sidan, i alla fall när jag går in och kollar nu. Eller tänker du på något annat?

• Vad display gör vet jag inte riktigt hur jag ska förklara på ett bra sett så jag ger dig denna länk ( http://www.w3schools...ass_display.asp )som kanske kan hjälpa eller om någon annan här på forumet kan.

• alt text går fin fint att lägga in. tex:

  <img src="minbild.jpg" alt="Min beskrivning här">

  Texten som anges inom alt="" visas om bilden av någon anledning inte skulle laddas.

  <a href="#" title="Länk beskrivning här">länk</a>

  Det som skrivs inom title="" syns om man håller muspekaren över länken.

/ Silentium

 

 

[Rickard.v]

När du tittade 00:30 så är det mitt javascript jag hittade som du tittar på.

 

Jag vill ju ha att en annan bild visas när man för musen över. Precis som jag gjort nu.

Pillade iordning bilderna igårkväll. Blir ganska bra tycker jag som glad amatör.

 

Du ser ju vart länken går, där hittade jag scriptet.