Forum Mjukvara Programmering och digitalt skapande Tråd

[HTML+CSS] Ska det bli såhär?

1
Skriv svar
Permalänk
Medlem ★
●

[HTML+CSS] Ska det bli såhär?

Hej

Jag har problem med min hemsida i Chrome och Safari, det fungerar i alla andra stora webbläsare (IE, Firefox, Opera). Jag vill ha så att jag kan ha två divar som flyter bredvid varandra, och som jag har förstått det så ska jag då ha en wrapper div med overflow: hidden; på, samt sätta float: left; och float: right; på mina divar.

Såhär ser det iaf ut nu:
HTML:

[...]
<div id="wrap">
	<div id="maincontent">
		....innehåll...
	</div>
	<div id="infobox">
		lite annat innehåll...
	</div>
</div>
[...]

CSS:

#wrap
{
	font-size: 10pt;
	overflow: hidden;
}
#maincontent
{
	float: left;
	width: 500px;
}

#infobox
{
	float: right;
	border: 1px solid #28D826;
	display: block;
	width: 250px;
	padding: 5px;
	margin-top: 40px;
	text-align: center;
}

Hur bör jag lösa det så att Chrome användare också ska kunna använda sidan?

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Overflow: hidden känns överflödig, kanske någon gammal webbläsarhack men äh.

Iaf, testa att sätta en bredd på wrappern som är bra mycket större än vad dom 2 andra divarna innuti är, så ser du iaf om dom floatar rätt, dessutom ska dom ligga jämte varandra så är det inte tvunget att ha float left på ena och float right på andra, båda kan vara left eller right, är bara när situationen kräver det som man behöver olika!

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Detta är en vanlig grund jag använder för att floata en meny på vänster sida och innehåll på höger sida:

#holdContainer är i ditt fall wrappern.

#leftContainer är för menyn
#rightContainer är för innehållet

jag har padding 0px på left och right samt i wrappern.

Vill jag sedan ha padding så löser jag det med en div inne i meny eller innehåll.

#holdContainer {
	width: 1000px;
	padding: 0px;
	position:relative;
	margin-left: auto;
	margin-right: auto;
}

#leftContainer {
	width: 200px;
	padding: 0px;
	position:	relative;
	float: left;
	
}
.rightPadding {
	padding: 15px;	
}
#rightContainer {
	width: 700px;
	padding: 	0px;
	position:	relative;
	float: right;

}

Något du säkert kan bygga på

Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

BlueEyes, jadu, personligen tycker jag att du ska läsa lite mer guider om CSS eller helt enkelt göra en testsida och testa dig fram, att göra en div bara för paddning är extremt inneffektivt, ser inte riktigt poängen med det?

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av x-per
BlueEyes, jadu, personligen tycker jag att du ska läsa lite mer guider om CSS eller helt enkelt göra en testsida och testa dig fram, att göra en div bara för paddning är extremt inneffektivt, ser inte riktigt poängen med det?

Smaken är som baken. men alltid är det någon som vill vara på styva linan utan att ha något kött på benen. Ser ingen hjälp kod ifrån din sida för att hjälpa OP. bara gnäll. Det kan vi vara utan.

Hur som helst så kan jag givetvis ha padding på left och right om jag vill det.

Saken är den att total bredden på den div man lägger padding och border på blir

total bredd = bredd + padding + border

Vilket betyder att om jag vill ha en total bredd på 200px och padding 10px men ingen border så får jag göra så här:

.left {

width: 180px;
padding: 10px;

}

Med andra ord får jag räkna med 10 px på varje sida utöver den bredd jag ställt in.

Sedan kan man ju mecka med minus värden osv också.
Men jag föredrar min variant.

Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

BlueEyes, jag ser faktiskt inte vad du menar, kan du försöka förklara lite bättre, verkar tyvärr enbart som om du har missuppfattat funktionerna i CSS.

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Det fungerar nu iaf, jag är inte helt säker på vad det var som gjorde att det började fungera, men såhär ser min CSS ut nu iaf:

#wrap
{
	font-size: 10pt;
	width: 100%;
	overflow:hidden;
	display: block;
	padding: 10px;
}
#maincontent
{
	float: left;
	width: 500px;
	position: relative;
}

#infobox
{
	float: right;
	border: 1px solid #28D826;
	display: block;
	width: 250px;
	padding: 5px;
	margin-right: 20px;
	position: relative;
	margin-top: 40px;
	text-align: center;
}
Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av x-per
BlueEyes, jag ser faktiskt inte vad du menar, kan du försöka förklara lite bättre, verkar tyvärr enbart som om du har missuppfattat funktionerna i CSS.

Och det verkar som du fortfarande inte har mycket att komma med.

Tills du har det så ser jag ingen vits med dina inlägg.

Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Citat:

Ursprungligen inskrivet av BlueEyes
Och det verkar som du fortfarande inte har mycket att komma med.

Tills du har det så ser jag ingen vits med dina inlägg.

Som jag skrev, hur ska jag kunna komma med något när du inte förklarar VARFÖR du kör en sån fullösning som fungerar likadant utan en extraklass!

Du förklarar typ såhär när någon frågar vad är en cykelpump:

"Den har ett handtag och slang"

Alltså du skriver bara vad sakerna innehåller, inte hur saken egentligen fungerar!

Dessutom, sluta vara så jävla tjurig...

PS: Dessutom, "inget att komma med", om du inte ser det så var jag den första som skrev en lösning i denna tråden, som dessutom trådskaparen använda sig av för att lösa hans problem!

Anledningen till att jag kommenterar dina inlägg är för att du skriver helt fel, och då är du inte i position att lära ut andra fel heller, OP är troligen ganska grön när det gäller CSS så då är det rätt viktigt att lära rätt från första början, dina extraklasser och din CSS som inte har någon funktion alls kan han vara utan...

Senast redigerat
Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av x-per
Som jag skrev, hur ska jag kunna komma med något när du inte förklarar VARFÖR du kör en sån fullösning som fungerar likadant utan en extraklass!

Du förklarar typ såhär när någon frågar vad är en cykelpump:

"Den har ett handtag och slang"

Alltså du skriver bara vad sakerna innehåller, inte hur saken egentligen fungerar!

Dessutom, sluta vara så jävla tjurig...

PS: Dessutom, "inget att komma med", om du inte ser det så var jag den första som skrev en lösning i denna tråden, som dessutom trådskaparen använda sig av för att lösa hans problem!

Anledningen till att jag kommenterar dina inlägg är för att du skriver helt fel, och då är du inte i position att lära ut andra fel heller, OP är troligen ganska grön när det gäller CSS så då är det rätt viktigt att lära rätt från första början, dina extraklasser och din CSS som inte har någon funktion alls kan han vara utan...

Jag vet vad som fungerar och bidrar med lite kod.

Innan du börjar slå dig själv på bröstet så bidra med lite kod och kunskap istället för att såga andra.

Anser nog att det är du som inte är i någon position att tala om för mig vad jag bidrar med är fel.

Du har inte gjort ett dugg förutom gnälla.

Med andra ord kom med lite kod eller håll tyst.

Finns alltid folk, (som du) som ska tvinga på andra sin syn av hur saker och ting ska vara. Och anser att andras sätt att koda är fel på grund av ditten och datten.

Blir riktigt trött på det syn sättet. Det finns inga rätt och fel. Bara olika sätt. Olika sätt som är mer eller mindre effektiva. Men inte för den skull fel.

Jag gav mina tips för att hjälpa någon igång, och då ska du direkt in och gnälla. Istället bidra med lite kod och ett vettigt argument varför din variant är bättre istället för att såga mitt sätt utan hållbar motivering.

Har jag fel så erkänner jag det, men i detta fall är det inte på det viset.

Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara