Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Html CSS JavaScript, photoshop?

1 2
Skriv svar
Permalänk
Medlem ★
●

Man bygger upp boxar och text med HTML.

CSS berättar hur text, boxar etc skall se ut, vart de skall ligga, med mera.

<style>
.coolBox {color:black}
</style>

<div class="coolBox">
Hej hej
</div>

DIV, är en box. Boxen omsluter texten. Jag har gett DIVen klassen "coolBOX", det betyder att webbläsaren letar bland CSS efter klassen coolbox, och applicerar "reglerna" för den klassen på boxen - I det här fallet gör klassen att texten i boxen blir svart.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Ernesto:

Man bygger upp boxar och text med HTML.

CSS berättar hur text, boxar etc skall se ut, vart de skall ligga, med mera.

<style>
.coolBox {color:black}
</style>

<div class="coolBox">
Hej hej
</div>

DIV, är en box. Boxen omsluter texten. Jag har gett DIVen klassen "coolBOX", det betyder att webbläsaren letar bland CSS efter klassen coolbox, och applicerar "reglerna" för den klassen på boxen - I det här fallet gör klassen att texten i boxen blir svart.

Gå till inlägget

tack så mycket!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Ernesto:

Man bygger upp boxar och text med HTML.

CSS berättar hur text, boxar etc skall se ut, vart de skall ligga, med mera.

<style>
.coolBox {color:black}
</style>

<div class="coolBox">
Hej hej
</div>

DIV, är en box. Boxen omsluter texten. Jag har gett DIVen klassen "coolBOX", det betyder att webbläsaren letar bland CSS efter klassen coolbox, och applicerar "reglerna" för den klassen på boxen - I det här fallet gör klassen att texten i boxen blir svart.

Gå till inlägget

Jag gjorde som du skrev, men jag fick ingen färg på divens bakgrund, vad gör jag för fel? lägger jag in koden direkt i html dokumentet så fungerar det, men får det inte att funka om jag ska linka med css dokumentet. adressen till css
dokumentet är korrekt skrivet då textfärg och sådant har ändrats. får bara inte till bakgrunden på boxarna. och sen undrar jag om man ska starta ccs dokumentet med något speciellt? typ som docktype, html eller dylikt?

och en till fråga, om du vill göra en header/meny i photoshop som ska ses på alla sidor på din webplats, lägger man in det i css dokumentet eller i html?

Tycker inte wc3school (eller vad sidan nu heter) beskriver CSS så vidare bra på så sätt hur man ska applicera just det jag frågar efter.

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

I <head> taggen så länkar du CSS såhär:
<link href="css/style.css" rel="stylesheet">
notera: css/ betyder att style.css ligger i en mapp kallad "css"

I css filen skriver man(för att följa Ernestos exempel)

.coolBox {
color: black; /*svart text */
background-color: pink; /*rosa backgrund i DIVEN*/
}

Om du har en DIV i ditt HTML dokument vid namn coolbox så kommer koden fungera.

<div class="coolBox">
<p> bakgrunden i denna box är rosa och texten är svart!</p>
</div>

Photoshop har inget med din meny att göra, du använde bara photoshop för att göra det grafiska.
Du bygger stilen på din meny i CSS och använder HTML elementen för att lägga in menyn.

<!-- HORISONTAL HTML MENY -->
<div class="meny">
<ul>
<li><a href="#">KNAPP 1</a></li>
<li><a href="#">KNAPP 2</a></li>
<li><a href="#">KNAPP 3</a></li>
</ul>
</div>

Alla Elementen i menyn kan designas i CSS.

class.meny {
background-color: gray;

}

class.meny li {
list-style: none;
display: inline ;
text-align: center;
}

/*länkar blir röd när man hovrar över dom*/
class.meny a:hover {
color: red;
}
Senast redigerat
Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Lättare att hjälpa om du klistrar in koden här på forumet.

Lägg koden inom [ code] [ /code] taggar så blir det lättare för oss att läsa.

I CSS dokumentet ska det bara vara CSS, det ska alltså inte stå <style> i det dokumentet - <style> är ju ett HTML element, som säger att i den här "boxen" kommer det stå "rå" CSS kod. Typ så.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Mycket bra att följa mitt exempel. Då kanske du blir internet-hjälte precis som jag någon dag. Kämpa på.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av FlorrpaN:

I <head> taggen så länkar du CSS såhär:
<link href="css/style.css" rel="stylesheet">
notera: css/ betyder att style.css ligger i en mapp kallad "css"

I css filen skriver man(för att följa Ernestos exempel)

.coolBox {
color: black; /*svart text */
background-color: pink; /*rosa backgrund i DIVEN*/
}

Om du har en DIV i ditt HTML dokument vid namn coolbox så kommer koden fungera.

<div class="coolBox">
<p> bakgrunden i denna box är rosa och texten är svart!</p>
</div>

Photoshop har inget med din meny att göra, du använde bara photoshop för att göra det grafiska.
Du bygger stilen på din meny i CSS och använder HTML elementen för att lägga in menyn.

<!-- HORISONTAL HTML MENY -->
<div class="meny">
<ul>
<li><a href="#">KNAPP 1</a></li>
<li><a href="#">KNAPP 2</a></li>
<li><a href="#">KNAPP 3</a></li>
</ul>
</div>

Alla Elementen i menyn kan designas i CSS.

class.meny {
background-color: gray;

}

class.meny li {
list-style: none;
display: inline ;
text-align: center;
}

/*länkar blir röd när man hovrar över dom*/
class.meny a:hover {
color: red;
}
Gå till inlägget

tack så mycket, nu förstår jag! läste lite om hur man kan flytta div boxarna som man vill ha dom, testade någon kd med algin:center eller liknande.. en jag fick inte div boxen att ändra sig. Vad är det för komandon för att flytta dessa diivar till top, left, right, center, bottom? sen blir det ett mellanrum mellan diven och utsidan av webfönstrets kanter, vad beror det på? försökt läst lite om detta, men inte fattat riktigt.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jag tänker inte sitta och förklara hur allt går till, det du ber om blir väldigt omständigt, rekommenderar dig att läsa på via html.net eller liknande.

Kan iaf säga att align: center inte fungerar, man måste sägga en bredd på en box och sedan använda sig av "margin: 0 auto" för att centrera en div.
Läs på om pisitionering, det är väldigt enkelt.. Tänk dig en div som en kartong, ta en stor kartong och släng ner massa småkartonger i den.
css

.BOX1 {
width: 200px; /*bredd*/
height: 200px; /*höjd*/
margin: 0 auto; //centrerar diven till mitten av sidan
}

HTML

<div class="BOX1"> 
<p>Denna div ligger i mitten av skärmen</p>
<p>Den är 200x200 pixlar stor</p>
</div>

Notera att du kan lägga divar inuti divar

<div class="storKartong"><!-- START STOR KARTONG -->
<div class="litenKartong"></div>
<div class="litenKartong2"></div>
</div><!-- SLUT STOR KARTING -->

osv..

Hoppas detta kan ge dig ett hum hur du via DIV storlekar kan placera DIVar i varandra och skapa en struktur.
Ett tips: storKartong bukar vara "wrappern" som håller grundstrukturen för hela sidans innehåll, dvs, du placerar ALLT inuti denna stora kartong.
Centrerar du den stora kartongen så ligger alla andra "litenKartong" också centrerat på sidan.

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av FlorrpaN:

Jag tänker inte sitta och förklara hur allt går till, det du ber om blir väldigt omständigt, rekommenderar dig att läsa på via html.net eller liknande.

Kan iaf säga att align: center inte fungerar, man måste sägga en bredd på en box och sedan använda sig av "margin: 0 auto" för att centrera en div.
Läs på om pisitionering, det är väldigt enkelt.. Tänk dig en div som en kartong, ta en stor kartong och släng ner massa småkartonger i den.
css

.BOX1 {
width: 200px; /*bredd*/
height: 200px; /*höjd*/
margin: 0 auto; //centrerar diven till mitten av sidan
}

HTML

<div class="BOX1"> 
<p>Denna div ligger i mitten av skärmen</p>
<p>Den är 200x200 pixlar stor</p>
</div>

Notera att du kan lägga divar inuti divar

<div class="storKartong"><!-- START STOR KARTONG -->
<div class="litenKartong"></div>
<div class="litenKartong2"></div>
</div><!-- SLUT STOR KARTING -->

osv..

Hoppas detta kan ge dig ett hum hur du via DIV storlekar kan placera DIVar i varandra och skapa en struktur.
Ett tips: storKartong bukar vara "wrappern" som håller grundstrukturen för hela sidans innehåll, dvs, du placerar ALLT inuti denna stora kartong.
Centrerar du den stora kartongen så ligger alla andra "litenKartong" också centrerat på sidan.

Gå till inlägget

klart du inte sa förklara allt, jag läser p s mycket jag kan, men iband hänger jag inte med eler blir en aning osäker. Men jag tackar dig för all hjälp, har fått ett hum om detta nu

Redigera
Citera flera Citera
Permalänk
Medlem
●
 	.mainbox {
background-color:red;
width: 990
color: green;
height: 2000
margin: 0 auto;
}

när jag skriver den koden i notepad ++ så blir color och magin's texter svarta, jämt emot dom andra koderna som blir "blåa". dom svarta, alltså color och margin syns inte p sidan. vad beror detta på? måste man skriva i någon viss ordning, eller är det notepad som failar?

och height är satt på 2000, men jag får ingen djup på boxen, den är ihop trycket tills texten kommer.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Jansson200: 
 	.mainbox {
background-color:red;
width: 990
color: green;
height: 2000
margin: 0 auto;
}

när jag skriver den koden i notepad ++ så blir color och magin's texter svarta, jämt emot dom andra koderna som blir "blåa". dom svarta, alltså color och margin syns inte p sidan. vad beror detta på? måste man skriva i någon viss ordning, eller är det notepad som failar?

och height är satt på 2000, men jag får ingen djup på boxen, den är ihop trycket tills texten kommer.

Gå till inlägget

width: 990px;

Efter varje avslutad kod måst du sätta ett semikolon > ; <, annars vet inte CSS när nästa värde börjar.
Du måste även sätta "px" efter width och height värdet, px står för pixels.
Jag rekommenderar att inte sätta en bestämd höjd på din "mainbox", den kommer automatiskt växa i höjd när du fyller den med andra divar

EDIT: vill även påpeka att du kan använda vilken färg du vill, använd dig av färgkoder.
Använd denna(som exempel)
http://www.colorpicker.com/

Sen gör man background-color: #färgkoden;

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Det saknas semi-colon efter width och height.

Redigera
Citera flera Citera
Permalänk
Medlem
●

tackar

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Jansson200:

tackar

Gå till inlägget

jag håller på att bli galen, har två menyer en vertical och en horizontal, problemet är att när jag använder denna kod så får jag båda menyerna verticala eftersom li {display:inline;} regerar på båda menyerna. hur kan man lösa detta?

.headermenu {
background-color: #FF0000;
height: auto;
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
text-decoration:none;
padding:0.2em 0.6em;
border-right:1px solid white;
}

a:hover {

background-color:#ff3300;
}
li {
display:inline;
}

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Precis som du har lagt klasser på div-arna (antar jag) så måste du lägga klass eller id på li-elementen eller något element som omsluter dessa.

Jag vet inte om du har dina li inne i någon div, du får gärna skriva HTML-koden också så blir det lättare att se vad som är vad. Men som tips kan du göra något av följande:

<div id="headermenu">
<ul>
<li>Hej</li>
<li>Hej2</li>
</ul>
</div>

<ul class="test">
<li>Hej1</li>
<li>Hej2</li>
</ul>

<style>
#headermenu {
background-color: #000;
}

#headermenu li {
display: inline;
}

ul.test li {
display: block;
}
</style>
Redigera
Citera flera Citera
Permalänk
Medlem
●

Kan rekommendera denna sida för dig: http://www.w3schools.com/css3/default.asp . Där lärde jag mig HTML och CSS och jag är behärskar både HTML och CSS bra nu enligt eget utsago.

Sen kan du läsa HTML and CSS, design and build websites av John Duckett. Väldigt bra bok för nybörjare. Den + w3schools kommer du långt med.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Kaptenkok:

Kan rekommendera denna sida för dig: http://www.w3schools.com/css3/default.asp . Där lärde jag mig HTML och CSS och jag är behärskar både HTML och CSS bra nu enligt eget utsago.

Sen kan du läsa HTML and CSS, design and build websites av John Duckett. Väldigt bra bok för nybörjare. Den + w3schools kommer du långt med.

Gå till inlägget

Jo, jag läser på så mycket jag kan, men har s svårt att få saker att fastna/förstå.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Tazavoo:

Precis som du har lagt klasser på div-arna (antar jag) så måste du lägga klass eller id på li-elementen eller något element som omsluter dessa.

Jag vet inte om du har dina li inne i någon div, du får gärna skriva HTML-koden också så blir det lättare att se vad som är vad. Men som tips kan du göra något av följande:

<div id="headermenu">
<ul>
<li>Hej</li>
<li>Hej2</li>
</ul>
</div>

<ul class="test">
<li>Hej1</li>
<li>Hej2</li>
</ul>

<style>
#headermenu {
background-color: #000;
}

#headermenu li {
display: inline;
}

ul.test li {
display: block;
}
</style>
Gå till inlägget

löste det, tack!!

Redigera
Citera flera Citera
Permalänk
Medlem
●

är de möjligt att sätta id på a: hover? på ena menyn vill jag ha kantiga block är jag hovrar och på den andra menyn runda hör på blocket. just nu har båda antingen runda eller kantiga block.

har försöt både googla och testat olika varianter själv. men det blir som samma sak

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Du har blandat ihop hur det fungerar.

ID sätts på ett element, för att ge det ett ID. Inget mer.

Klasser sätts på ett element, för att ge det en stil, fet text, border, röd bakgrund etc.

I CSS stylar man klasser så här:

.minKlass {color:black}

punkten före "minKlass" betyder att KLASSEN minKlass skall se ut så här.

Ingenting före, betyder elementet

Brädgård # betyder element med ID

div .minKlass{color: red}

Betyder element, inne i en DIV, som har klassen minKlass, skall ha röd text.

#mittID div .minKlass

Betyder samma sak, fast endast om elementet div ligger inne i någonting som har ID mittID.

Man stylar mycket sällan saker efter ID, det är rätt dålig praxis i de flesta fall. Det kan nämligen bara finnas ett element med ett specifikt ID på sidan. Har du flera element med samma ID blir det buggar.

Vill du styla hover på en <a> skriver du a.minklass:hover eller .minklass:hover

eller a:hover så blir det på ALLA a, om de inte har en specifik regel

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Ernesto:

Du har blandat ihop hur det fungerar.

ID sätts på ett element, för att ge det ett ID. Inget mer.

Klasser sätts på ett element, för att ge det en stil, fet text, border, röd bakgrund etc.

I CSS stylar man klasser så här:

.minKlass {color:black}

punkten före "minKlass" betyder att KLASSEN minKlass skall se ut så här.

Ingenting före, betyder elementet

Brädgård # betyder element med ID

div .minKlass{color: red}

Betyder element, inne i en DIV, som har klassen minKlass, skall ha röd text.

#mittID div .minKlass

Betyder samma sak, fast endast om elementet div ligger inne i någonting som har ID mittID.

Man stylar mycket sällan saker efter ID, det är rätt dålig praxis i de flesta fall. Det kan nämligen bara finnas ett element med ett specifikt ID på sidan. Har du flera element med samma ID blir det buggar.

Vill du styla hover på en <a> skriver du a.minklass:hover eller .minklass:hover

eller a:hover så blir det på ALLA a, om de inte har en specifik regel

Gå till inlägget

Tackar!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Först av allt, vill jag be om ursäkt om jag frågar så mycket här, men jag googlar allt innan jag frågar er, men det är inte så lätt att googla på något man inte vet vad det heter.

och till frågan. När jag förminskar fönstret genom att sätta pilen i ena hörnet och föra den inåt så börjar min <---horisonala meny--> plus banner/header vad ni nu vill kala det för samt "footern" minskas ner och blir mindre än min content som verkar hålla samma mått ovasett hur litet fönstret är. plus att den <--horisonela menyn --> börjar gruppera sig som en vertical meny, ju mindre fönstret är. Hur löser jag detta? Så layouten och allt håller samma struktur och linje med varandra ovasett hur litet fönstret är. Kan tänka mig att det skulle vara en ren mes som man såg det på telefon.

CSS kod:

/*
1. Mainbox
1. Body
2. Header
4. Headermeu
3. Innerbox
4. Content
5. Menu
4. Bottom
*/

body {
margin:0;
padding:0;
background-color: black;
}
.mainbox {

}
/*header*/
.header {
background-color: red;
height: 100px;
margin:0;
}

/*mainmenu*/

.headermenu {

}

#menu{
	width: 100%;
	margin: 0;
	padding: 10px 0 0 0;
	list-style: none;  
	background: #111;
	background: -moz-linear-gradient(#444, #111); 
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));	
	background: -webkit-linear-gradient(#444, #111);	
	background: -o-linear-gradient(#444, #111);
	background: -ms-linear-gradient(#444, #111);
	background: linear-gradient(#444, #111);
	-moz-border-radius: 0px;
	border-radius: 0px;
	-moz-box-shadow: 0 2px 1px #9c9c9c;
	-webkit-box-shadow: 0 2px 1px #9c9c9c;
	box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
	float: right;
	padding: 0 0 10px 0;
	position: relative;
}

#menu a{
	float: left;
	height: 25px;
	padding: 0 25px;
	color: #999;
	text-transform: uppercase;
	font: bold 12px/25px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
	color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
	color: #fafafa;
}

#menu li:hover > ul{
	display: block;
}

/* Sub-menu */

#menu ul{
    list-style: none;
    margin: 0px;
    padding: 0px;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;    
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111);	
    background: -ms-linear-gradient(#444, #111);	
    background: linear-gradient(#444, #111);	
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}

#menu ul a{    
width: 110px;
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a{ /* IE6 */   
	height: 10px;
	width: 50px;
}

*:first-child+html #menu ul a{ /* IE7 */    
	height: 10px;
	width: 150px;
}

#menu ul a:hover{
        background: #0186ba;
	background: -moz-linear-gradient(#04acec,  #0186ba);	
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background: -webkit-linear-gradient(#04acec,  #0186ba);
	background: -o-linear-gradient(#04acec,  #0186ba);
	background: -ms-linear-gradient(#04acec,  #0186ba);
	background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec; 
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

/*innerbox*/
.innerbox {
background-color: pink;
width: 990px;
height: 900px;
float: center;
margin-left: auto;
margin-right:auto;



}

/*content*/
.content {
background-color: white;
float: right;
height: auto;
width: 760px;
border-style:solid;
border-color:grey;
margin-top: 100px;
-moz-border-radius: 10px;
border-radius: 10px;
}

 /*menu*/
.menu {
background-color: #d7ebf9;
width: 200px;
height: 350px;
float: left;
-moz-border-radius: 10px;
border-radius: 10px;
margin-top: 100px;

}

.infobox {
width: 180px;
height: 60px;
margin:10px 10px 10px 10px;
-moz-border-radius: 10px;
border-radius: 10px;
  z-index: 99999;    
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111);	
    background: -ms-linear-gradient(#444, #111);	
    background: linear-gradient(#444, #111);	
}

.menu a:link {
text-decoration:none;
display: block;
color: #3F4344;
color:#3F4344;

} 



.menu a:hover {
background-color:#30ACFF;
width:100%;
color: white;
-moz-border-radius: 10px;
border-radius: 10px;


}

ul.leftmenu li {

list-style-type:none;
margin:0;
padding:0;

}

/*bottom*/
.bottom {
background-color: red;
height: 55px;
width: 100%;
}
Redigera
Citera flera Citera
1 2
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara