CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede pstidsen Novice
05. februar 2012 - 19:16 Der er 24 kommentarer og
1 løsning

ALTID 33% højde

Hvordan gør man sådan at et element ALTID er 33% høj selvom det ikke er udfyldt? height="33%" virker jo ikke...
Avatar billede claes57 Ekspert
05. februar 2012 - 20:18 #1
du skal have en over og en under der har højden på 34/33% - så giver resten nok sig selv.
Avatar billede olebole Juniormester
05. februar 2012 - 20:44 #2
<ole>

@pstidsen: Du skal da være ret avanceret for at få dette til at fejle:

<div style="width:400px;height:600px;background:yellow">
    <div style="width:300px;height:33%;background:red"></div>
</div>

- men det kræver naturligvis, at browseren har en højde at beregne de 33% udfra. Har det omkransende element ikke fået sat en højde, kan browseren ikke beregne noget ... 33% af hvad?  *o)

/mvh
</bole>
Avatar billede pstidsen Novice
05. februar 2012 - 20:51 #3
33% af browservinduet var meningen?
Avatar billede pstidsen Novice
05. februar 2012 - 20:53 #4
jeg laver det bare i px. Lader den lige stå åben hvis jeg får flere problemer ;)
Avatar billede pstidsen Novice
05. februar 2012 - 21:15 #5
Har et problem:

Jeg har en tabel. Den er ret indviklet... I kan se et link her: www.runescapenews.dk/Pstidsen/table.html Problemet er de 7 tomme kasser. Jeg bliver nød til at have dem for at kunne styre hvor den store kasse i midten skal starte. Men fordi de er der kan kasse nummer 2, 3 og 4 ikke komme ned under den store kasse som de skal. Any solutions?
Avatar billede olebole Juniormester
05. februar 2012 - 22:02 #6
Sorry, men den slags gider jeg ikke rode med. Drop brug af col- og rowspan med mindre, det er til Excel-agtige tabeller, hvor små afvigelser ikke betyder noget (og selv her giver det lange knæ!).

Tabeller skodder i forvejen til layout - og tilfældighederne holder for alvor fest, når du bruger row- og colspan.

Eneste fornuftige løsning hedder trashcan - og forfra med stylede containere  =)
Avatar billede pstidsen Novice
05. februar 2012 - 22:22 #7
Div er prøvet men her vil layoutet heller ikke hænge sammen...
Avatar billede olebole Juniormester
05. februar 2012 - 22:26 #8
Tro mig: Tabeller bliver langt værre  =)
Avatar billede pstidsen Novice
05. februar 2012 - 22:28 #9
Den er der da næsten.... ;)

Har du en god guide til containere så? (helst dansk)
Avatar billede olebole Juniormester
05. februar 2012 - 22:58 #10
W3C's CSS reference - men det er jo ikke en kogebog til fastfood  =)

Jeg kan ikke udfra billedet se målene på elementerne. Kunne du evt. uploade et med mål på - og en forklaring, hvis der skal være elastik i noget?
Avatar billede pstidsen Novice
05. februar 2012 - 23:11 #11
Regner med det hele skal være 1600*768.

Her er en hurtig skitse: http://gratisupload.dk/billede/thumb/673261/full/
De aflange kasser i siderne skal være 20% (måske 15% det justerer jeg selv) brede og 33 1/3% høje. De øverste små kasser skal være 10% høje og 10% brede. Kasserne i bunden skal være 10% høje og 20% brede. Den store i midten bliver vel så 60*80.
Avatar billede olebole Juniormester
06. februar 2012 - 00:06 #12
Jeg prøver at kikke på det i morgen eftermiddag. Nu er det ved at være tid til Super Bowl (på dansk: 'Super Skål' ... *hik*) - og da jeg er gammel Patriots fan, såååå ... *o)
Avatar billede claes57 Ekspert
06. februar 2012 - 10:03 #13
og Giants vandt så igen igen... ;)
Avatar billede pstidsen Novice
08. februar 2012 - 19:19 #14
Nå olebole er der stadig tømmermænd eller er du ikke færdig med gravøllen? :P

Spøj til side, håber du er ændru nok til det her:

Jeg er gået igang selv (det ville jo heller ikke gøre noget hvis jeg skulle gå hen og lære noget af det her projekt...). Jeg har læst på nogle hjemmesider (siger ikke hvilke - det kender jeg dig for godt til). Nå, men jeg er kommet hertil: http://runescapenews.dk/Pstidsen/div.html og der slår jeg panden mod CSS muren! Hvorfor rykker Venstre 1 sig ikke op i toppen!?

Html:
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Div tags i CSS</title>
        <link rel="stylesheet" href="divstyle.css" type="text/css"/>
    </head>
    <body>

    <!-- Hoveddiv -->
    <div id="hoved">

    <!-- Venstre_1 -->

    <div id="venstre"><div id="venstre_1">Venstre 1</div>

    <!-- Venstre_2 -->

    <div id="venstre_2">Venstre 2</div>

    <!-- Venstre_3 -->

    <div id="venstre_3">Venstre 3</div></div>
   
    <!-- Top_1 -->
    <div id="top_1">Top_1</div>
    <!-- Top_2 -->
    <div id="top_2">Top_2</div>
    <!-- Top_3 -->
    <div id="top_3">Top_3</div>
    <!-- Top_4 -->
    <div id="top_4">Top_4</div>
    <!-- Top_5 -->
    <div id="top_5">Top_5</div>
    <!-- Top_6 -->
    <div id="top_6">Top_6</div>
   
    </div>

    </body>
</html>

CSS:
#hoved {
    width: 990px;
    height: 700px;
    margin: 0px;
    padding: 0px;
    border-style: solid;
    border-width: thin;
   
}
#venstre {
    width: 150px;
    height: 700px;
    margin-top: 0px;
    border-style: solid;
    border-width: thin;
    float: left;
}
#venstre_1 {
    width: 150px;
    height: 233px;
    border-style: solid;
    border-width: thin;
}
#venstre_2 {
    width: 150px;
    height: 233px;
    border-style: solid;
    border-width: thin;
}
#venstre_3 {
    width: 150px;
    height: 233px;
    border-style: solid;
    border-width: thin;
}
#top_1 {
    width: 115px;
    height: 70px;
    margin-left: 155px;
    margin-top: 0px;
    border-style: solid;
    border-width: thin;
}
#top_2 {
    width: 115px;
    height: 70px;
    margin-left: 265px;
    margin-top: 0px;
    border-style: solid;
    border-width: thin;
}
#top_3 {
    width: 115px;
    height: 70px;
    margin-left: 380px;
    margin-top: 0px;
    border-style: solid;
    border-width: thin;
}
#top_4 {
    width: 115px;
    height: 70px;
    margin-left: 495px;
    margin-top: 0px;
    border-style: solid;
    border-width: thin;
}
#top_5 {
    width: 115px;
    height: 70px;
    margin-left: 610px;
    margin-top: 0px;
    border-style: solid;
    border-width: thin;
}
#top_6 {
    width: 115px;
    height: 70px;
    margin-left: 725px;
    margin-top: 0px;
    border-style: solid;
    border-width: thin;
}


Så nogle generelle spørgsmål. Når man har af gøre med styling af divs, hvad er så vigtigt? Jeg ved i hvert fald at disse elementer er vigtige:
Margin
Padding
Float

Af de tre har jeg nogenlunde styr på de to første, men float synes jeg ikke er helt logisk. Kan du forklare den? Også gerne forklar lidt om de to første.


Når man ser konkret på mit projekt, hvordan ville du så gribe det an? En hoveddiv og så bare 16 små forskellige divs? Eller vil du lave forskelle udnerdivs? F.eks. en div til de tre i venstre side og en til alt det i midten og en til dem i toppen eller hvordan?

Det var mange spørgsmål. Håber du vil svare!
Avatar billede pstidsen Novice
08. februar 2012 - 19:31 #15
i HTML'en manglede der lige et slut div tag. Det er rettet nu.
Avatar billede pstidsen Novice
08. februar 2012 - 21:06 #16
Boksede videre med det og fandt ud af at jeg manglede en position: absolute;
Avatar billede pstidsen Novice
08. februar 2012 - 21:36 #17
HVADBEHAR!? Så lykkedes det! Jeg får kun to warnings i w3 validator. Hvad betyder de i praksis?
Using experimental feature: HTML5 Conformance Checker.

The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies. If you find any issues with this feature, please report them. Thank you.


Byte-Order Mark found in UTF-8 File.

The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported.

Min CSS får ingen fejl.

Dog vil jeg gerne have din godkendelse, olebole, for at det er fint/perfekt.

HTML:
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Div tags i CSS</title>
        <link rel="stylesheet" href="divstyle.css" type="text/css"/>
    </head>
    <body>

    <!-- Hoveddiv -->
    <div id="hoved">
   
    <!-- Højre 1 -->
    <div id="hojre"><div id="hojre_1">Højre 1</div>

    <!-- Højre 2 -->
    <div id="hojre_2">Højre 2</div>

    <!-- Højre 3 -->
    <div id="hojre_3">Højre 3</div>
    </div>
   
    <!-- Venstre 1 -->
    <div id="venstre"><div id="venstre_1">Venstre 1</div>
    <!-- Venstre 2 -->
    <div id="venstre_2">Venstre 2</div>
    <!-- Venstre 3 -->
    <div id="venstre_3">Venstre 3</div></div>
   
    <!-- Top 1 -->
    <div id="top_1">Top 1</div>
    <!-- Top 2 -->
    <div id="top_2">Top 2</div>
    <!-- Top 3 -->
    <div id="top_3">Top 3</div>
    <!-- Top 4 -->
    <div id="top_4">Top 4</div>
    <!-- Top 5 -->
    <div id="top_5">Top 5</div>
    <!-- Top 6 -->
    <div id="top_6">Top 6</div>
   
    <!-- Stor boks -->
    <div id="storboks">Stor boks</div>
   
    <!-- Bund 1 -->
    <div id="bund_1">Bund 1</div>
    <!-- Bund 2 -->
    <div id="bund_2">Bund 2</div>
    <!-- Bund 3 -->
    <div id="bund_3">Bund 3</div>
   
    </div>

    </body>
</html>


CSS:
#hoved {
    width: 990px;
    height: 700px;
    margin: 0px;
    padding: 0px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#venstre {
    width: 150px;
    height: 700px;
    margin-top: 0px;
    border-style: solid;
    border-width: thin;
    float: left;
    position: relative;
}
#venstre_1 {
    width: 150px;
    height: 233px;
    border-style: solid;
    border-width: thin;
    position: relative;
}
#venstre_2 {
    width: 150px;
    height: 233px;
    border-style: solid;
    border-width: thin;
    position: relative;
}
#venstre_3 {
    width: 150px;
    height: 233px;
    border-style: solid;
    border-width: thin;
    position: relative;
}
#hojre {
    width: 150px;
    height: 700px;
    margin-top: 0px;
    border-style: solid;
    border-width: thin;
    position: relative;
    float: right;
    margin-right: 0px;
}
#hojre_1 {
    width: 150px;
    height: 233px;
    border-style: solid;
    border-width: thin;
    position: relative;
    float: right;
    margin-right: 0px;
}
#hojre_2 {
    width: 150px;
    height: 233px;
    border-style: solid;
    border-width: thin;
    position: relative;
    float: right;
    margin-right: 0px;
}
#hojre_3 {
    width: 150px;
    height: 233px;
    border-style: solid;
    border-width: thin;
    position: relative;
    float: right;
    margin-right: 0px;
}
#top_1 {
    width: 115px;
    height: 70px;
    margin-left: 150px;
    margin-top: 0px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#top_2 {
    width: 115px;
    height: 70px;
    margin-left: 265px;
    margin-top: 0px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#top_3 {
    width: 115px;
    height: 70px;
    margin-left: 380px;
    margin-top: 0px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#top_4 {
    width: 115px;
    height: 70px;
    margin-left: 495px;
    margin-top: 0px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#top_5 {
    width: 115px;
    height: 70px;
    margin-left: 610px;
    margin-top: 0px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#top_6 {
    width: 115px;
    height: 70px;
    margin-left: 725px;
    margin-top: 0px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#storboks {
    width: 690px;
    height: 560px;
    margin-left: 150px;
    margin-top: 70px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#bund_1 {
    width: 230px;
    height: 70px;
    margin-left: 150px;
    margin-top: 630px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#bund_2 {
    width: 230px;
    height: 70px;
    margin-left: 380px;
    margin-top: 630px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#bund_3 {
    width: 230px;
    height: 70px;
    margin-left: 610px;
    margin-top: 630px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}


Ser det OK ud? Du må også MEGET gerne besvare de spørgsmål der stadig er relevante fra #14. I det ovenstående jeg har lavet har jeg prøvet mig meget frem. Derfor kunne det være fint at få lidt teori proppet med ind :)
Avatar billede pstidsen Novice
08. februar 2012 - 23:07 #18
Har lige slettet lidt uoverflødigt CSS kode, så det nu ser sådan her ud:
#hoved {
    width: 990px;
    height: 700px;
    margin: 0px;
    padding: 0px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#venstre {
    width: 150px;
    height: 700px;
    float: left;
    position: relative;
}
#venstre_1 {
    width: 150px;
    height: 233px;
    border-style: solid;
    border-width: thin;
    position: relative;
}
#venstre_2 {
    width: 150px;
    height: 233px;
    border-style: solid;
    border-width: thin;
    position: relative;
}
#venstre_3 {
    width: 150px;
    height: 233px;
    border-style: solid;
    border-width: thin;
    position: relative;
}
#hojre {
    width: 150px;
    height: 700px;
    position: relative;
    float: right;
}
#hojre_1 {
    width: 150px;
    height: 233px;
    border-style: solid;
    border-width: thin;
    position: relative;
}
#hojre_2 {
    width: 150px;
    height: 233px;
    border-style: solid;
    border-width: thin;
    position: relative;
}
#hojre_3 {
    width: 150px;
    height: 233px;
    border-style: solid;
    border-width: thin;
    position: relative;
}
#top_1 {
    width: 115px;
    height: 70px;
    margin-left: 150px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#top_2 {
    width: 115px;
    height: 70px;
    margin-left: 265px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#top_3 {
    width: 115px;
    height: 70px;
    margin-left: 380px;
    margin-top: 0px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#top_4 {
    width: 115px;
    height: 70px;
    margin-left: 495px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#top_5 {
    width: 115px;
    height: 70px;
    margin-left: 610px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#top_6 {
    width: 115px;
    height: 70px;
    margin-left: 725px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#storboks {
    width: 690px;
    height: 560px;
    margin-left: 150px;
    margin-top: 70px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#bund_1 {
    width: 230px;
    height: 70px;
    margin-left: 150px;
    margin-top: 630px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#bund_2 {
    width: 230px;
    height: 70px;
    margin-left: 380px;
    margin-top: 630px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}
#bund_3 {
    width: 230px;
    height: 70px;
    margin-left: 610px;
    margin-top: 630px;
    border-style: solid;
    border-width: thin;
    position: absolute;
}

Jeg er også stødt på noget andet jeg ikke forstår. Hvad er forskellen på absolute og relative position??
Avatar billede olebole Juniormester
09. februar 2012 - 17:17 #19
Sorry, denne tråd havde jeg helt glemt. Det er en længere omgang, som jeg lige må kikke på.

Generelt vil jeg råde til at læse om positionering her - men læs også resten af siden. Den giver et godt indblik i en HTML-sides flow m.m.m.

De omtalte 'validerinsfejl' er ikke fejl, men advarsler. Den ene går på, at HTML5 endnu ikke er færdig og gældende standard, og valideringen derfor er stadig er eksperimentel.

Den anden går på, at BOM-tegn i begyndelsen af en utf-8 fil kan skabe problemer - f.eks. ved PHP-includes. Nu ved jeg ikke, hvilken editor du anvender, men i mange kan du selv sætte, hvordan filerne skal gemmes (med eller uden BOM)
Avatar billede pstidsen Novice
09. februar 2012 - 17:25 #20
50 siders engelsk godnatlæsning... MUMS!

Det er en længere omgang, som jeg lige må kikke på.
Hvad er det du vil kigge på? =)

Bruger Notepad++ og var i tvivl og jeg skal tage BOM eller ej. Hvad skal man tage?
Avatar billede olebole Juniormester
09. februar 2012 - 17:26 #21
Der er ingen fejl i din opbygning, omend jeg nok ikke havde valgt at lave det på helt samme måde
Avatar billede olebole Juniormester
09. februar 2012 - 17:27 #22
Uden BOM
Avatar billede pstidsen Novice
09. februar 2012 - 17:47 #23
#21: Kan du beskrive hvad du ville gøre anderledes?

Jeg ved godt du ikke vil have point, men VIL du ik godt tage dem? Du har hjulpet meget!
Avatar billede olebole Juniormester
09. februar 2012 - 17:57 #24
Jeg sidder og arbejder med nogle tilbud, så jeg har kun tid til ganske korte svar i øjeblikket.

Nej, ellers tak. Spørg evt. en af de andre vedr. points  =)
Avatar billede pstidsen Novice
09. februar 2012 - 18:18 #25
Svar
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 16:05 Log ind problem på WordPres side Af Prevo i Andet software
I går 17:26 NAV 2016 mailliste Af Hans Peter i Økonomiprogrammer
I går 00:56 Win 10 Af lurup i Windows Phone
21/0915:09 Mobilrouter mangler forbindelse i Sverige Af perhol i Routere & Switches
21/0910:53 WordMat Af jgormm i Word
White papers
Flere white papers »


Premium
Teaser billede
Microsoft har fundet alvorlig sårbarhed og hasteopdaterer: Er 10 ud af 10 på skalaen
Læs mere »
112 år gammel dansk virksomhed hacket af kendt hackergruppe - men René vil ikke betale løsesum
Sikkerhedsekspert Michael Gustaffson fortæller: Sådan fik vi afværget verdens største DDoS-angreb
På vej i retten: Om få dage åbner den største GDPR-sag mod det offentlige nogensinde i Danmark
Se alle »
Computerworld
Teaser billede
I aften sker det: Din iPhone får en monumental opdatering
Læs mere »
Microsoft tvangsinstallerer app i din Office 365 i næste måned: Du kan ikke slippe
Alt om Apples store opdatering til iPhone, Mac, Watch og iPad
Apple opdager alvorlig sårbarhed i ældre iPhones og iPads
Se alle »
CIO
Teaser billede
”Det fylder helt oppe på direktionsgangene:" Danske topkonsulenter løfter sløret for det allervigtigste it-tema lige nu
Læs mere »
Region Sjælland dropper kæmpe Oracle-planer til 150 millioner kroner: Skifter til SAP
En af verdens største cloud-transformationer er færdiggjort: 100.000 medarbejdere er blevet koblet på
Microsoft-topchef Satya Nadella er "hjemsøgt" af frygten for, at AI bliver Microsofts død
Se alle »
Job & Karriere
Teaser billede
Tryg skiller sig af med 225 it-medarbejdere: Outsourcer stor del af sin it-drift til indere
Læs mere »
Her er fidusen: Sådan fastholder KMD og Twoday deres it-folk i lang tid
Henrik Bodskov fratræder som topchef for Aeven: Her er den nye topchef
Novo Nordisks CIO og digitale topchef, Anders Romare, forlader selskabet
Se alle »
White paper
Teaser billede
Sådan får du succes med AI i hele organisationen
Læs mere »
Fra drift til strategi: IT-chefens genvej til et stærkere netværk
Sådan sikrer du nem og beskyttet adgang til dine ressourcer
Udnyt Genesys Cloud CX optimalt og styrk kundeoplevelsen
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »