Fuel: Tackar. Jag gick ju en webbkurs för ett x antal år sedan.
Då var det ganska nytt med att skapa sidor helt med css.
Så i slutet av kursen klämdes detta in.
Mariginaler
39 svar · 2 036 visningar · startad av mackanz · sida 2 av 2
Nu återstår ett problem litet .
Jag försöker på sidan dela upp så får jag får två kolummer,.
Men hur jag än lägger in divar så sprängs designen i sär.
Det har ju med detta med float och göra tror jag.
Men förstår inte ändå.
Jag har en div som är content och vid sidan av den en som jag kallar hogermain.
Men det vill sig inte. hur jag än kodar.
Snälla söta rara. Hur löser jag detta???
placera allt du vill skall flotas till vänster med i en egen div inte bara en "hogermain"
Det är det jag försöker få till. Två divar.
Jag har ju i min layout lyckats få till en div som är i mitten.
(Där jag skrivit bla bla bla)
I den diven försöker jag infoga två divar. En som jag floatar till vänster och en till höger. Men det vill sig inte.
ska du ha en till höger & en till vänster ska den första div floata höger. Annars tar du float left på bägge. Glöm inte clear:both sen.
<div id="wrap" style="width:500px;">
<div id="div1" style="width:250px; float:left;">
Hej
</div>
<div id="div2" style="width:250px; float:left; clear:both;">
Tjena
</div>
</div>
Edit: Kan någon moderator el liknande kolla varför HTML / Kod rutorna breddar sid designen så mkt ?
Fuel: Jo det där förstår jag, och det har jag fått till.
Men problemet är när jag lägger in dessa två divar i en annan div så sprängs layouten sönder.
Jag har ju en hel blå ruta med rundade hörn. i mitten av den rutan finns en div med classen "content". Det är i den jag skall infoga två divar. Har testa det mesta med floating men det vill sig icke.
infoga kod som du tror stämmer så får man se vad som du gör för fel:
<div id="content">
<div id="leftmain"></div>
<div id="rightmain"></div>
</div>
är inga problem så länge leftmain och rightmain totallt med padding, width och margin inte bli större än vad content är
Tackar. Nu ska jag testa lite på egen hand för att se vad som händer för att få lite förståelse för det hela.
Så här ser min asp fil ut
<!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" xml:lang="en" lang="en">
<head>
<meta name="Description" content="Dansband." />
<meta name="Keywords" content="your, keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="Markus Redman- info@markuz.se" />
<meta name="Robots" content="index,follow" />
<link rel="stylesheet" href="css/page.css" type="text/css" />
<!-- #include file="inc/muffins.asp" -->
<title>Välkommen till Högtryck - Startsidan</title>
</head>
<body>
<div id="pagewidth">
<div id="header">
<a href="index.asp"><img src="bilder/top.gif" alt="Högtryck" class="menyimghead" /></a>
<a href="index.asp"><img src="bilder/knapp_start.gif" alt="Startsidan" class="menyimg" /></a>
<a href="nyheter.asp"><img src="bilder/knapp_nyheter.gif" alt="Nyheter" class="menyimg" /></a>
<a href="historik.asp"><img src="bilder/knapp_historik.gif" alt="Historik om Högtryck" class="menyimg" /></a>
<a href="medlemmar.asp"><img src="bilder/knapp_medlemmar.gif" alt="Medlemmar" class="menyimg" /></a>
<a href="spelplan.asp"><img src="bilder/knapp_spelplan.gif" alt="Spelplan" class="menyimg" /></a>
<a href="press.asp"><img src="bilder/knapp_press.gif" alt="Pressmaterial" class="menyimg" /></a>
<a href="musik.asp"><img src="bilder/knapp_musik.gif" alt="Musik & Skivor" class="menyimg" /></a>
<a href="lankar.asp"><img src="bilder/knapp_lankar.gif" alt="Länkar" class="menyimg" /></a>
<a href="gastbok.asp"><img src="bilder/knapp_gastbok.gif" alt="Gästboken" class="menyimg" /></a>
<a href="bokning.asp"><img src="bilder/knapp_bokning.gif" alt="Boka oss" class="menyimg" /></a>
</div>
<div id="wrapper" class="clearfix">
<div id="maincol">
<div id="container">
<div class="roundtop">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<div class="content">
<div id="vanstermain">
<a href="#" target="_blank"><img src="bilder/main.jpg" class="menyimg"><a /> <br />
<a href="#" target="_blank"><img src="bilder/main_hg_blogg.gif" class="menyimg"><a /> <br />
<a href="#" target="_blank"><img src="bilder/main_hg_facebook.gif" class="menyimg"><a /> <br />
<a href="#" target="_blank"><img src="bilder/main_hg_youtube.gif" class="menyimg"><a /> <br />
</div>
<div id="hogermain">
<%
sql = "SELECT * from main"
rs.open sql, mincon, 3, 3
%>
<%
do while not rs.eof
%>
<%=rs("text")%>
<%
rs.movenext
loop
rs.Close
%>
<img src="bilder/main_hg_nyheter.gif" class="menyimg"> <br />
<%
sql = "SELECT top 2 * from NYHETER order by dat DESC"
rs.open sql, mincon, 3, 3
%>
<%
do while not rs.eof
%>
<%=rs("RUBRIK")%> <br />
<%
Session.LCID = 1053
Response.write cDate(rs("dat"))
%> <br />
<%=rs("NYHET")%> <br /> <br />
<%
rs.movenext
loop
rs.Close
%>
<img src="bilder/main_hg_spelningar.gif" class="menyimg"> <br />
<%
sql = "SELECT top 3 * from SPELPLAN WHERE DATUM >= DateAdd('d', -1, DATE()) ORDER BY DATUM ASC"
rs.open sql, mincon, 3, 3
%>
<%
do while not rs.eof
%>
<%
Session.LCID = 1053
Response.write cDate(rs("datum"))
%> <%=rs("ort")%> <br />
<%
rs.movenext
loop
rs.Close
%>
</div>
</div>
</div>
</div>
<div class="roundbottom">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</div>
<div id="footer"> © Högtryck 2007-2010 | Produktion: M Webdesign | Besökare:
</div>
</div>
</body>
</html>
och så här ser css-filen ut:
html, body{
margin:0;
padding:0;
text-align:center;
background: #042E52 url(../bilder/bg_page.jpg);
background-repeat: no-repeat; background-position: center center; background-attachment: fixed;
}
#pagewidth{
width:780px;
text-align:left;
margin-left:auto;
margin-right:auto;
}
#header{
position:relative;
height:176px;
background-color:#transparent;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
spacing: 0px 0px 0px 0px;
}
#header a {
display:block;
float:left;'
border: 0px
}
.right {
float:right;
border: 0px
}
.menyimg {
border: 0px
}
.menyimghead {
border: 0px ;
display: block;
}
.content {
background: #07467C;
font: normal 11px Georgia, "Times New Roman", Times, serif;
color: #fff;
}
#vanstermain {
background: #07467C;
float: left;
font: normal 11px Georgia, "Times New Roman", Times, serif;
color: #fff;
}
#hogermain {
background: #07467C;
float: right;
font: normal 11px Georgia, "Times New Roman", Times, serif;
color: #fff;
}
#maincol{background-color: #transparent;
float: right;
display:inline;
width:780px;
position: relative;
}
#footer{
height:30px;
padding: 5px;
background-color:#transparent;
clear:both;
color:#fff;
font: normal 11px Georgia, "Times New Roman", Times, serif;
text-align: center;
}
/* *** Float containers fix:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
#container
.roundtop {background: #transparant;}
.roundbottom {background: #transparan;}
.r1{margin: 0 5px; height: 1px; overflow: hidden; background: #000000;
border-left: 1px solid #000000; border-right: 1px solid #000000;}
.r2{margin: 0 3px; height: 1px; overflow: hidden; background: #06467C;
border-left: 1px solid #000000; border-right: 1px solid #000000;
border-width: 0 2px;}
.r3{margin: 0 2px; height: 1px; overflow: hidden; background: #06467C;
border-left: 1px solid #000000; border-right: 1px solid #000000;}
.r4{margin: 0 1px; height: 2px; overflow: hidden; background: #06467C;
border-left: 1px solid #000000; border-right: 1px solid #000000;}
.content {padding: 10px; background: #06467C;
border-left: 1px solid #000000; border-right: 1px solid #000000;}
-->
vilken sida är det, är betydligt enklare att se den live än att skapa upp dokument, speciellt när du postar ASP kod.
Det här är jag testar: http://www.hogtryck.ax/2010/index.asp
Och där det står bla bla bla vill jag ha in en vänster och en höger kollumn.
Du har ju inget i den diven förutom en text, vad fungera inte med den kod du postade ovan?
firebug:
<div class="content">
<div id="vanstermain">test</div>
<div id="hogermain">test</div>
</div>
och CSS:
#vanstermain {
background:none repeat scroll 0 0 #07467C;
color:#FFFFFF;
float:left;
font:11px Georgia,"Times New Roman",Times,serif;
width:50%;
}
#hogermain {
background:none repeat scroll 0 0 #07467C;
color:#FFFFFF;
float:left;
font:11px Georgia,"Times New Roman",Times,serif;
width:50%;
}
Varför inte endast sätta float:left; och bredd på #vanstermain medan man låter #hogermain sträcka ut sig över den plats som finns över och eventuellt sätta en margin-left på #hogermain för att få dess innehåll att hålla sig på sin kant? Eller har jag missat något krav från TS? :)
Nu är det bara dom små jacken som kom dit som jag skall pilla bort.
Eller så kanske man måste inlinda dom två divarna med en div som går över hela?
Jacken beror på att du har padding på din .content och genomskinliga fältet för att det inte finns något float med.
så ett förslag är att
.content { background: #06467C;
border-left: 1px solid #000000; border-right: 1px solid #000000;width:778px;float:left;}
778px eftersom diven är 780px och du vill ha med de två svarta ränderna på sidorna.
sedan får du lägga texten i t.ex ett <p> och se till att den får avstånd till kanterna, antingen med en class eller det jag tycker är enklast att i css
#divnamnet p{width:90%; margin:5%;}t.ex.
Tackar alla som hjälpt till. Nu funkar det som det ska. Med er hjälp och lite egen envishet så klarar man det mesta.
Jag misstänker att din kod inte fungerar i IE7 och neråt, även efter det du fixat valideringsfelen. Jag har bara 8:an på datorn jag sitter vid nu. Har du tillgång till 7:an?
Om inte så kan du kolla här http://ipinfo.info/netrenderer/index.php
Tanten: Det är som du misstänkte. Nu har jag inte brytt mig om att uppdatera IE på ett bra tag här så jag har "bara" version 6 och där såg det inte alls bra ut, det gäller även version 7 som en kompis kollade åt mig.
* host *