hej det är jag igen. alltså nu har jag letat som en galning efter hjälp men jag hittar inte. Jag måste bara få fråga er igen.
Alltså jag har som sagt menyn till vänster. Sen ska det vara en text till höger om detta.
Men när jag lägger in texten och jag har den centrerad så skjuts menyn neråt. Väljer jag då float right på texten så lägger den sig väldigt långt ut till höger. Längst ut faktiskt. Hur ska jag göra för att lösa detta? Plus att <h1>texten följer med när man minskar browsern. Jag kan inte hitta nåt om detta nånstanns. Snälla hjälp mig.
Positionering
81 svar · 2 145 visningar · startad av axionman · sida 4 av 5
Jomen det är ju så att om du säger float: right så betyder ju det att den ska göra precis så. Du har sagt åt div:en att hålla sig så långt ut till höger den bara kan!
Vill du att den ska hålla sig till vänster istället, nära menyn, så sätter du float: left istället, men då måste du dessutom sätta float: left på din meny så att dom hajjar att dom ska ligga och gosa tillsammans på vänsterkanten! Vill du sen ha lite mellanrum till menyn så kan du leka med margin-left eller margin-right beroende på var du sätter den propertyn.
kom på vad jag skulle göra. När jag la min text under menyn i html koden så fungerade det.
hej jg har lagt in lite bilder. de ser ut så här.
<img src="b1.jpg" widht="80px" height="80px" />
får detta felmeddelandet i pspad.
line 23 column 1 - Warning: <img> proprietary attribute "widht"
line 23 column 1 - Warning: <img> attribute "height" has invalid value "80px"
sen i firefox står de exakt samma. vad beror detta på?
en sak till. jag vill som sagt ha bilder små på bildsidan. Men sen när man trycker på en bild så ska den bilden öppnas normalstor i ett nytt fönster. Hur gör man detta? har kunnat de men har fan glömt de. hehe. tack
Det är för att du stavar fel: width ska det vara. Och att sätta px efter mått gör man i css, i HTML är det utan. Vanligt fel :)
- du stavade fel till "width"
- du kan inte ha angivna pixlar i bildstorleken
- glöm inte alternativ text ;)
<a href="storbild.jpg"><img src="b1.jpg" width="80" height="80" alt="" /></a>
eller kika på lightbox...
hehe jag såg att jag stavat fel nu. herre gud så lätt de kan vara ibland. Alltså vilken tur att man hittade denna sidan alltså. Ni har hjälpt mig med så mycket alltså.. Började från scratch med hemsidor för 2 veckor sen och håller nu på med css. har er att tacka för.
Men jag fick inte svar på min fråga om när man trycker på en bild så ska den öppnas i ett nytt fönster. Alltså en ny browser ska öppnas.
caya skrev:
kika på lightbox...
det verkar vara lite dålig hörbarhet här, så jag upprepar mig ;)
Jo lightbox e verkligen snyggt, men om han nu bestämt sig för att det är en popup han vill ha så går det ju enkelt att fixa :)
Jag har en javascriptfunktion som jag kallar för popUp
<script language="JavaScript" type="text/JavaScript">
<!--
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=1,menubar=0,resizable=1,width=420,height=620');");
}
-->
</script>
Som jag sen anropar med
<a href="javascript:popUp('images/min_bild.jpg')">Klicka!</a>
/HB
caya skrev:
det verkar vara lite dålig hörbarhet här, så jag upprepar mig ;)
Hehe ne jag såg vad du skrev men jag ignorerade det bara för jag förstod inte vad du menade. haha..
men tack ändå. ;)
men sen har jag ett nytt problem som jag verkligen inte fattar.
Har gjort en undermeny till en text. Jag kan ändra storlek och typ på texten men inte färgen. vad beror det på? Det är det som ligger under våra tjänster.
Det är ändast dem jag ska påverka och de gör jag också förutom färgen.
Så här ser det ut.
<ul>
<li><a href="index.html">Startsida</a></li>
<li><a href="historik.html">Historik</a></li>
<li><a href="miljo.html">Miljömål</a></li>
<li><a href="certifiering.html">Certifiering & Tillstånd</a></li>
<li><a href="framtidsplaner.html">Framtidsplaner & Visioner</a></li>
<li><a href="bildarkiv.html">Bildarkiv</a></li>
<li><a href="#">Våra tjänster</a></li>
</ul>
<ul>
<li class="undermeny"><a href="#">Kabelåtervinning</a></li>
<li class="undermeny"><a href="#">Containerservice</a></li>
<li class="undermeny"><a href="#">Kran & Skrottransporter</a></li>
<li class="undermeny"><a href="#">Inköp av metallskrot</a></li>
<li class="undermeny"><a href="#">Försäljning utav begagnat stål och metall material.</a></li>
</ul>
<ul>
<li><a href="tillsalu.html">Till Salu</a></li>
<li><a href="priser.html">Priser</a></li>
<li><a href="kontakt.html">Kontakter</a></li>
</ul>
.undermeny {
font-size:13px;
font-family:arial;
color:white;
}
<ul class="huvudmeny">
<li><a href="index.html">Startsida</a></li>
<li><a href="historik.html">Historik</a></li>
<li><a href="miljo.html">Miljömål</a></li>
<li><a href="certifiering.html">Certifiering & Tillstånd</a></li>
<li><a href="framtidsplaner.html">Framtidsplaner & Visioner</a></li>
<li><a href="bildarkiv.html">Bildarkiv</a></li>
<li><a href="#">Våra tjänster</a></li>
</ul>
<ul class="undermeny">
<li><a href="#">Kabelåtervinning</a></li>
<li><a href="#">Containerservice</a></li>
<li><a href="#">Kran & Skrottransporter</a></li>
<li><a href="#">Inköp av metallskrot</a></li>
<li><a href="#">Försäljning utav begagnat stål- och metallmaterial.</a></li>
</ul>
/* huvudmeny */
.huvudmeny li a {
color:#fff;
font:15px Arial, sans-serif
}
/*undermenyspecifikationer */
.undermeny li a {
color#fff;
font:13px Arial, sans-serif
}
tack det hjälpte mig. Men jag har en fråga till.. Vad betyder "a" efter .undermeny li?
Det är ju a-taggen, dvs länkarna.
.undermeny li a = <a href> inuti en <li> inuti <vadsomhelst class="undemeny">
Nu kommer jag och ska vara jobbig igen. Det har hänt väldigt konstiga saker här nu. Tog bort min ram runt min meny. Och nu har det hänt konstiga saker. Min meny har lagt sig horisentallt istället. dem ligger lixom efter varandra på rad i sidled. Vad fan beror detta på? Mycket märkligt. Mina bilder ska lixom ligga till höger om menyn plus att menyn ska gå neråt. Vill någon kolla på detta?
body {background-color:#6495ED;}
a:link { text-decoration: none}
a:visited { text-decoration: none}
a:active { text-decoration: none}
a:hover { text-decoration:underline }
img { border-style:none; target:0;}
h1 {
text-align:center;
border-bottom: 1px solid #ccc;
padding:3px;
color:#008B8B;
font-size:18px;
}
h2 {
Font-size:30px;
color:#DC143C;
font-style:arial;
text-align:center;
margin-top:480px;
}
h3{
Font-size:20px;
color:#DC143C;
font-style:arial;
margin-top:0px;
text-align:center;
}
#meny {
background-color:#B0C4DE;
border:1px dotted #000;
border-color:white;
width:150px;
padding:3px;
margin-top:0px;
margin-left:0px;
float:left;
}
ul {
list-style:none;
margin-top:10px;
padding:3px;
float:left;
}
li {
margin:5px 0;
display:block;
line-height: 5px;
font-family: berlin sans FB;
margin-top:5px;
float:left;
}
p {
font-family:arial;
color:#008B8B;
line-height:20px;
float:left;
font-size:15px;
margin-left:80px;
}
.sidbrytning {
page-break-after: always;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HMCS</title>
<link href="mall.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Välkommen till Helsingborgs Metall & Containerservice AB</h1>
<ul>
<li><a href="index.html">Startsida</a></li>
<li><a href="historik.html">Historik</a></li>
<li><a href="miljo.html">Miljömål</a></li>
<li><a href="certifiering.html">Certifiering & Tillstånd</a></li>
<li><a href="framtidsplaner.html">Framtidsplaner & Visioner</a></li>
<li><a href="bildarkiv.html">Bildarkiv</a></li>
<li><a href="varatjanster.html">Våra Tjänster</a></li>
<li><a href="tillsalu.html">Till Salu</a></li>
<li><a href="priser.html">Priser</a></li>
<li><a href="kontakt.html">Kontakter</a></li>
</ul>
<div class="bild1"><img src="b3.jpg" width="250" height="250" alt="bild" /></div>
<div class="bild2"><img src="b4.jpg" width="200" height="150" alt="bild" /></div>
<div class="bild3"><img src="b5.jpg" width="200" height="150" alt="bild" /></div>
<h2>HMCS</h2>
<h3><strong>Inovation Perfection Dedication</strong></h3>
</body>
</html>
för att du har float:left på dina li
headbug om han ändå ska skriva bra kod vore det väl dumt att lusa ned den med att anropa javascriptet genom javascript:popUp?
Sist jag kollade fanns det inge protokoll som hette javascript. :) Det är bättre att ha en länk till själva bilden i a-taggen och sedan skicka med en hänvisning till this.href i funktionen som han aropar i onClick-eventet. I funktionen stoppar han sedan laddningen av href-taggen.
På så sätt så följer koden även god javascript-standard plus att det blir unobtrusive. :)
headbug skrev:
Jo lightbox e verkligen snyggt, men om han nu bestämt sig för att det är en popup han vill ha så går det ju enkelt att fixa :)
Jag har en javascriptfunktion som jag kallar för popUp
<script language="JavaScript" type="text/JavaScript"> <!-- function popUp(URL) { day = new Date(); id = day.getTime(); eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=1,menubar=0,resizable=1,width=420,height=620');"); } --> </script>Som jag sen anropar med
<a href="javascript:popUp('images/min_bild.jpg')">Klicka!</a>/HB
alltså nu börjar de verkligen slå slint i mitt huvud. Ni måste bara förklara detta för mig. Har som sagt en meny till vänster. Den ska vara där. Sen vill jag ha lite vanlig text till höger om detta centrerat. Men alltså de lägger sig lixom under min meny. Texten ska ju vara i topp än längre ner. Vad beror detta på? allting blev så här konstigt sen jag tog bort min ram runt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HMCS</title>
<link href="mall.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Företagets Historik</h1>
<ul>
<li><a href="index.html">Startsida</a></li>
<li><a href="historik.html">Historik</a></li>
<li><a href="miljo.html">Miljömål</a></li>
<li><a href="certifiering.html">Certifiering & Tillstånd</a></li>
<li><a href="framtidsplaner.html">Framtidsplaner & Visioner</a></li>
<li><a href="bildarkiv.html">Bildarkiv</a></li>
<li><a href="varatjanster.html">Våra Tjänster</a></li>
<li><a href="tillsalu.html">Till Salu</a></li>
<li><a href="priser.html">Priser</a></li>
<li><a href="kontakt.html">Kontakter</a></li>
</ul>
<p>Företaget grundades hösten 2002 som ett lokalt alternativ till de aktörer<br />
som funnits länge på marknaden. Inriktningen var att hyra ut och erbjuda<br />
containers för järn och metallskrot. Företaget ville bygga på flexibilitet och<br />
nyttja sin styrka genom att vara litet med få korta beslutsvägar för att arbeta<br />
mot kunderna. Verksamheten har vuxit stadigt under åren och har idag åtta<br />
anställda. Bolaget drivs och ägs utav tre delägare.</p>
</body>
</html>
body {background-color:#6495ED;}
a:link { text-decoration: none; color:Red}
a:visited { text-decoration:none; color:red}
a:active { text-decoration:none; color:red}
a:hover { text-decoration:underline }
img { border-style:none; target:0;}
h1 {
text-align:center;
border-bottom: 1px solid #ccc;
padding:3px;
color:red;
font-size:18px;
}
h2 {
Font-size:30px;
color:#DC143C;
font-style:arial;
text-align:center;
margin-top:480px;
}
h3{
Font-size:20px;
color:#DC143C;
font-style:arial;
margin-top:0px;
text-align:center;
}
#meny {
background-color:#B0C4DE;
border:1px dotted #000;
border-color:white;
width:150px;
float:left;
}
ul {
list-style:none;
margin-top:10px;
padding:3px;
}
li {
margin-left:1px;
display:block;
line-height: 10px;
font-family: berlin sans FB;
line-height:20px;
}
p {
font-family:arial;
color:#008B8B;
line-height:20px;
font-size:15px;
text-align:center;
margin-top:0px;
}
.sidbrytning {
page-break-after: always;
}
.justeringk {
font-family:arial;
color:#008B8B;
line-height:20px;
font-size:15px;
text-align:center;
}
.avstond {
font-family:arial;
color:#008B8B;
line-height:20px;
float:left;
font-size:15px;
margin-left:170px;
margin-top:50px;
}
.priser {
font-family:arial;
color:#008B8B;
line-height:20px;
float:left;
font-size:15px;
margin-left:100px;
margin-top:50px;
}
.bild1 {
float:left;
margin-top:140px;
margin-left:5px;
}
.bild2 {
float:left;
margin-top:240px;
}
.bild3 {
float:left;
margin-top:240px;
}
.undermeny li a {
color:#fff;
font:13px Arial, sans-serif;
margin-left:5px
}
#undermeny a:link { text-decoration:none; }
#undermeny a:visited { text-decoration:none; }
#undermeny a:active { text-decoration:none; }
#undermeny a:hover { text-decoration: underline;}
.huvudmeny li a {
font:15px Arial, sans-serif;
margin-left:5px
}
Ett försök till förklaring.
Allt du skriver i html-kod kommer att ta 100% av sidans bredd.
Spelar ingen roll vilket...
h1, ul eller p som du har på din sida nu
För att få dem att lägga sig bredvid varandra och inte ta upp hela fönstrets bredd så anger man vidd på dem.
Enklast är då att t.ex lägga menyn i en div, ange bredd på den och tala om att den ska lämna plats åt annat på sin högra sida. Gör man t.ex med float:left.
Sedan kan det vara bra att lägga ditt p i en div också och göra samma sak med den diven. Ange bredd och floata den också.
Finns även andra sätt att positionera saker på platser som inte är dess naturliga plats. Men du kan ju testa lite om float passar det du vill.
tack de fungerade
alltså nu håller jag på med min egna hemsida. Har lagt in en bildram där jag då har bilder i sen under denna ska de vara en ram där det ska vara text. När jag lägger in denna ram för texten så skjuts hela min meny neråt. Kan inte fatta detta. har testat med allt känns de som. Vet inte om jag lägger skiten fel eller vad det är. SNälla hjälp mig. (trots att ni e väldigt trötta på mig nu)
Och en sak till. I IE ser allt bra ut men inte i firefox. Än en gång.... Vad beror det nu på?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<link href="text.css" rel="stylesheet" type="text/css" />
<link href="bilder.css" rel="stylesheet" type="text/css" />
<title>SKATEDEMOS</title>
</head>
<body>
<div id="header">
<h1>WELCOME TO SKATEDEMOS</h1>
</div>
<div id="lager1">
<div class="bildram">
<img src="oskar.jpg" width="100" height="100" alt="oskar" />
<img src="oskar2.jpg" width="100" height="100" alt="oskar" />
<img src="oskar3.jpg" width="100" height="100" alt="oskar" />
<img src="oskarsad.jpg" width="100" height="100" alt="oskar" />
</div>
<div class="textram">
</div>
<div id="meny1">
<h2>Login</h2>
<h3>Username</h3>
<form action="">
<input type="text" name="name" class="form" /><br />
<h3>Password</h3>
<input type="password" name="password" class="form" /><br />
<input type="image" src="loggain.gif" />
</form>
<h4><a href="#">Forgot Password</a></h4>
<h4><a href="#">Create Account</a></h4>
</div>
<div id="select">
<select name="Style">
<option selected>-- Style --</option>
<option>Street</option>
<option>Vert</option>
<option>Freestyle</option>
</select>
</div>
<div id="meny2">
<ul>
<li><a href="#">Home</a>
<ul>
<li><a href="#">Create account</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Stylea</a></li>
<li><a href="#">Vip</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Faq</a></li>
</ul>
</ul>
</div>
</div>
</body>
</html>
body {
background-color:gray;
}
#header {
width: 768px;
height: 70px;
background-color:#2F4F4F;
border:1px solid white;
margin-right:10px;
}
}
#lager1 {
width:768px;
height:800px;
background-color:#696969;
border-top:3px solid white;
border-bottom:1px solid white;
border-left:1px solid white;
border-right:1px solid white;
margin-top: 10px;
}
.textram {
width:300px;
height:100px;
border:1px solid white;
background-color:black;
float:right;
margin-right:100px
}
#meny1 {
margin-left: 5px;
margin-top: 5px;
padding: 0;
width:120px;
height:250px;
background-color:#2F4F4F;
border:1px solid white;
}
#meny2 {
width:120px;
height:250px;
background-color:#2F4F4F;
border:1px solid white;
margin-top:5px;
margin-left:5px
}
#select {
margin-left:20px;
}
.form {
height:18px;
width:105px;
margin-left:5px
}
.bildram {
background-color:black;
width:412px;
height:50px;
border:1px solid white;
float:right;
margin-right:70px;
margin-top:10px
}
.bild1 {
margin-right:130px;
float:right;
margin-top:10px
}