15 svar · 1 043 visningar · startad av Moogle
Hej alla..
Jag har hatt lite hjälp för att designa min hemsida. Han har jobbat bra och så, men nu när sista designen kom upp frågade jag varför jag fick scrollbar i sidled och varför inte sidan anpassade sig efter min skärm (som jag nämnde från början att jag ville ha)
Han flippade ur och sa det var mitt jobb att ha koll på upplösningar etc..
Umm..om jag hadde haft det hadde jag förmodligen inte haft behov av hjälp från början eller hur? :l
Men så här ligger det till nu, jag har en sida som inte är ferdig.
Jag har ingen aning hur jag ska fixa till storleken.
Jag har alt som finns på min server. xml och css etc.
Om jag postar css här, är det nån som kan hitta vart jag måste ändra?
Har läst om px, em och %, men blir inte direkt klok på alla förslag som finns.
Tack
body
{
margin: 0;
padding: 0;
font-family: Arial;
font-size: 0.8em;
background-image: url('/Images/loopBG.png');
background-repeat: repeat-x;
background-position: left 300px;
background-attachment:fixed;
}
a
{
color: #ccc;
text-decoration: none;
}
a:hover
{
color: #ccc;
text-decoration: underline;
}
/* MENU */
#menu
{
padding-left: 190px;
padding-top: 10px;
margin-bottom: -5px;
width:1200px;
height:36px;
float:left;
overflow: visible;
}
#menu ul
{
margin:2px 0 0 6px;
padding:0;
background:none;
width:680px;
text-align: center;
list-style-type:none;
float:left;
}
#menu li
{
height:36px;
float:left;
font-size:0.8em;
text-align:center;
text-transform:uppercase;
background:none;
}
#menu li a { height:26px; text-decoration:none; padding-top: 10px; color:#FFF; background:none; display:block; float:left; }
#menu li a:hover { color:#FFF; }
#menu li a.search { width:126px; background:url(../Images/Default.png); }
#menu li a.search:hover { background:url(../Images/DefaultOnOver.png); }
#menu li a.suggest { width:126px; background:url(../Images/Default.png); }
#menu li a.suggest:hover { background:url(../Images/DefaultOnOver.png); }
#menu li a.about { width:126px; background:url(../Images/Default.png); }
#menu li a.about:hover { background:url(../Images/DefaultOnOver.png); }
#menu li a.advertise { width:126px; background:url(../Images/Default.png); }
#menu li a.advertise:hover { background:url(../Images/DefaultOnOver.png); }
#menu li a.contact { width:126px; background:url(../Images/Default.png); }
#menu li a.contact:hover { background:url(../Images/DefaultOnOver.png); }
/* Placeholder Elements */
.FullPage
{
width: 1200px;
position: absolute;
left : 50%;
margin-left: -500px;
}
#TopHolder
{
height: 100px;
width: 1000px;
float: left;
}
#TopHolder .banner
{
margin-left: 60px;
width: 600px;
float: left;
}
#TopHolder .Logo
{
float: left;
width: 150px;
}
#TopHolder .Lang
{
float: right;
width: 150px;
text-align: right;
}
.LeftHolder
{
margin-right: 7px;
width: 160px;
height: 600px;
float:left;
}
.RightHolder
{
margin-left: 1px;
width: 160px;
height: 600px;
float:left;
}
#Content
{
overflow-y:scroll;
height: 360px;
width: 600px;
padding-left: 20px;
margin: 10px auto auto 30px;
}
#Content h1 {
color: #333;
font-family: Arial;
font-size: 1.4em;
text-decoration: none;
}
#Content p
{
color: #333;
font-family: Arial;
font-size: 1.2em;
}
#Content .text
{
width: 200px;
float: left;
}
#Content .labels
{
padding-left: 30px;
line-height: 23px;
width: 140px;
float: left;
}
#Content .controls
{
width: 200px;
float: left;
}
.ContentPlaceHolder
{
width: 700px;
float: left;
}
.ContentHolderTop
{
width: 700px;
height: 22px;
float:left;
background:url(../Images/BGTop.png);
background-repeat: no-repeat;
}
.ContentHolderBottom
{
color: #CCC;
padding: 20px;
text-align: center;
width: 700px;
height: 69px;
float:left;
background:url(../Images/BGBottom.png);
background-repeat: no-repeat;
}
.ContentHolderBottom a
{
font-size: 1.0em;
color: #ccc;
text-decoration: none;
}
.ContentHolderBottom a:hover
{
color: #ccc;
text-decoration: underline;
}
.ContentHolderMiddle
{
height: 522px;
width: 700px;
float:left;
background:url(../Images/BGMiddle.png);
background-repeat: repeat-y;
}
.ContactForm h1
{
color: #333;
font-family: Arial;
font-size: 1.2em;
text-decoration: none;
}
.ContactForm p
{
color: #333;
font-family: Arial;
font-size: 1.0em;
}
.FormLabel
{
color: #333;
}
Glömde säja att det går inte att titta ens i 1280x800.
Jag vill göra så att den blir bra i 1024x768 som är "vanligast".
Har frågat 2 gånger vilken storlek han gjort den för, men får inget svar..
Jag tror han insätt han gjort bort sig, men vill lägga det på mig.
Hej!
Sök efter width i din css och byt ut till lämpliga värden :)
Jag tror inte att enbart din css-kod kommer räcka för att någon ska kunna hjälpa dig med detta. Det är inte uppenbart hur sidan faktiskt ser ut, och att bara ändra bredden på måfå här och var gör förmodligen att layouten kollapsar.
Om du har möjlighet att posta även din html-kod - eller ännu bättre om det går att komma åt sidan ifråga på något sätt - kan nog någon hjälpa dig att få ordning på det.
Men exempelvis #menu, .FullPage och #TopHolder verkar väldigt breda. Som sagt var tror jag inte att det hjälper att bara ändra bredden på dessa, eftersom det förmodligen kan få lite oönskade effekter.
mmmmmnh.. jag hittar inte html koden. Ligger ingen på servern, men om jag kopierar från källkoden så finns det en.
Av praktiska skäl är lite av infoen bytt ut med "xx". (Företagsskydd)
Nåt mer jag ska posta som kan hjälpa?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
xxx
</title><meta name="description" /><meta name="keywords" /><link href="Styles/Screen.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../JavaScript/swfobject.js"></script>
</head>
<body>
<form name="aspnetForm" method="post" action="Default.aspx?id=20&lang=sv" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTM5NjA4Mjk1OQ9kFgJmD2QWAgIDD2QWAgICD2QWAgIBDxYCHgtfIUl0ZW1Db3VudAIBFgJmD2QWAmYPFQQGT20gb3NzCUxpdGUgaW5mbwDYCwoKICAgICAgICAgICAgICA8Y2VudGVyPjxpbWcgc3JjPSIvSW1hZ2VzL3N5bWxvZ28uanBnIiBib3JkZXI9IjAiIGFsdD0iTG9nbyIgLz48L2NlbnRlcj4KCiAgICAgICAgICA8YnIgLz4KCjxzdHJvbmc+VsOkbGtvbW1lbiB0aWxsIGRlbiBmw7Zyc3RhIGxhbnNlcmFkZSBtYXJrbmFkc3BsYXRzIGbDtnIgb25saW5lYnV0aWtlciBpbm5vbSBkZW4gRXVyb3BlaXNrYSBVbmlvbi48L3N0cm9uZz4KPGJyIC8+PGJyIC8+CmlMb29waXQgw6RyIGV0dCBzdmVuc2t0IGJhc2VyYXQgZsO2cmV0YWcgc29tIMO2bnNrYXIgYXR0IGbDtnJiaW5kYSBvbmxpbmVzaG9wcGluZyDDtnZlciBncsOkbnNlcm5hIG1lZCBkZW5uYSB0asOkbnN0Lgo8YnIgLz48YnIgLz4KVmkgc3RhcnRhciBhdiBnZW5vbSBhdHQgbGFuc2VyYSBidXRpa2VyIGkgRGFubWFyaywgVHlza2xhbmQsIFN2ZXJpZ2Ugb2NoIEVuZ2xhbmQuClbDpXIgYW1iaXRpb24gw6RyIGF0dCBzYW1sYSBhbGxhIGJ1dGlrZXIgdW5kZXIgc2FtbWEg4oCddGFr4oCdIHPDpSBhdHQgZHUgc29tIGtvbnN1bWVudCBsw6R0dCBoaXR0YXIgdmFkIGR1IHPDtmtlciBlZnRlci4gU2VkYW4gdmkgw6RyIGFsbGEgbWVkbGVtbWFyIGF2IEVVIMOkciB2aSBow6RsZGlnYSBhdHQga3VubmEgc2hvcHBhIHV0YW4gYXR0IGJldGFsYSB0dWxsYXZnaWZ0ZXIuIE9ubGluZWJ1dGlrZW4gdmlsbCBnZSBkaWcgbsO2ZHZlbmRpZ3QgaW5mb3JtYXRpb24gb20gw6RtbmV0LgpGw7ZyIHbDpXJhIGFubm9uc8O2cmVyIHRyb3IgdmkgcMOlIGVuIMO2a2FkIGhhbmRlbCBvY2ggZW4gw7ZrYWQgYmV2aXNzdGhldCBibGFuZCBrb25zdW1lbnRlciB1dGFuZsO2ciBhbm5vbnPDtnJlbnMgaGVtbGFuZCB2aWQgYXR0IGFubm9uc2VyYSBow6RyLgo8YnIgLz48YnIgLz4KT20gZHUgdmV0IGVuIGJ1dGlrIHNvbSBkdSB0eWNrZXIgYm9yZGUgdmFyYSBow6RyLDxiciAvPgpza2lja2EgaW5uIGZvcm11bMOkcmV0IHNvbSBkdSBoaXR0YXIgcMOlPHN0cm9uZz7igJ1UaXBzYSBvbSBidXRpa+KAnS48L3N0cm9uZz4KPGJyIC8+PGJyIC8+CkbDtnIgYXR0IGFubm9uc2VyYSwgdsOkbmxpZ2VuIGZ5bGwgaSBmb3JtdWzDpHJldCBkdSBoaXR0YXIgdW5kZXIgPHN0cm9uZz7igJ1Bbm5vbnNlcmHigJ08L3N0cm9uZz4gb2NoIGVuIGF2IHbDpXJhIHNhbGdzbWVkYXJiZXRhcmUgdmlsbCB0YSBrb250YWt0LgpHw6VyIGV2ZW4gYnJhIGF0dCBtYWlsYSBkaXJla3QgdGlsbDogc2FsZXNAaWxvb3BpdC5jb20KPGJyIC8+PGJyIC8+CgpGw7ZyIGFuZHJhIGtvbW1lbnRhcmVyIGVsbGVyIGZyw6Vnb3IgZnlsbCBpIGZvcm11bMOkcmV0IHVuZGVyIDxzdHJvbmc+4oCdS29udGFrdGEgb3Nz4oCdLjwvc3Ryb25nPgo8YnIgLz48YnIgLz4KCjxzdHJvbmc+VGFjayBmw7ZyIGRpbiB2aXN0ZWxzZSBzw6UgbMOlbmd0IG9jaCBob3BwYXMgbmkgdHlja2VyIG9tIHRqw6Ruc3Rlbi48L3N0cm9uZz4KPGJyIC8+PGJyIC8+CmlMb29waXQgdGVhbWV0LgoKICAgICAgICAgICAgZGRJoIHDivni+zh0QmEBoJlvpdLeQg==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
\<div class="FullPage"\>
\<div id="TopHolder"\>
\<div class="Logo"\>
\<img src="../Images/LoopLogo.jpg" /\>
\</div\>
\<div class="banner"\>
\<div id="topbanner"\>
This text is replaced by the Flash movie.
\</div\>
\<script type="text/javascript"\>
var so = new SWFObject("/Flash/TopBanner.swf", "mymovie", "600", "100", "8", "#FFF");
so.write("topbanner");
\</script\>
\</div\>
\<div class="Lang"\>
\<a id="ctl00_Header_ButtonSv" href="javascript:\__doPostBack('ctl00$Header$ButtonSv','')"\>Sv\</a\> \| \<a id="ctl00_Header_SetLangEN" href="javascript:\__doPostBack('ctl00$Header$SetLangEN','')"\>En\</a\>
\</div\>
\</div\>
\<div id="menu"\>
\<ul\>
\<li\>\<a href="/Default.aspx?id=10&lang=sv" class="search"\>Sök\</a\>\</li\>
\<li\>\<a href="/Templates/xxaspx?id=40&lang=sv" class="suggest"\>xx\</a\>\</li\>
\<li\>\<a href="/Default.aspx?id=20&lang=sv" class="about"\>Om oss\</a\>\</li\>
\<li\>\<a href="/Templates/xx.aspx?id=30&lang=sv" class="advertise"\>xx\</a\>\</li\>
\<li\>\<a href="/Templates/ContactForm.aspx?id=50&lang=sv" class="contact"\>Kontakta oss\</a\>\</li\>
\</ul\>
\</div\>
\<div class="LeftHolder"\>
\<div id="flashcontent"\>
This text is replaced by the Flash movie.
\</div\>
\<script type="text/javascript"\>
var so = new SWFObject("/Flash/Banner.swf", "mymovie", "160", "630", "8", "#FFF");
so.write("flashcontent");
\</script\>
\</div\>
\<div class="ContentPlaceHolder"\>
\<div class="ContentHolderTop"\>\</div\>
\<div class="ContentHolderMiddle"\>
\<div id="Content"\>
\<h1\>Om oss \| Lite info\</h1\>
\<p class="ingress"\>
\</p\>
\<p class="mainbody"\>
\<center\>\<img src="/Images/symlogo.jpg" border="0" alt="Logo" /\>\</center\>
\<br /\>
xx
<br /><br />
xx
<br /><br />
xx
<br /><br />
xx
<br /><br />
Går even bra att maila direkt till: xx
<br /><br />
För andra kommentarer eller frågor fyll i formuläret under <strong>”Kontakta oss”.</strong>
<br /><br />
<strong>xxstrong>
<br /><br />
\</p\>
\</div\>
\<center\>
\<div id="vipbanner"\>
This text is replaced by the Flash movie.
\</div\>
\<script type="text/javascript"\>
var so = new SWFObject("/Flash/VipBanner.swf", "mymovie", "600", "150", "8", "#FFF");
so.write("vipbanner");
\</script\>
\</center\>
\</div\>
\<div class="ContentHolderBottom"\>
Copyright © 2008 xxx \| \<a href="/Default.aspx?id=60&lang=sv"\>Användarvilkor\</a\> \| \<a href="/Default.aspx?id=70&lang=sv"\>Privacy policy\</a\>
\</div\>
\</div\>
\<div class="RightHolder"\>
\<div id="flashcontentright"\>
This text is replaced by the Flash movie.
\</div\>
\<script type="text/javascript"\>
var so = new SWFObject("/Flash/Banner.swf", "mymovie", "160", "630", "8", "#FFF");
so.write("flashcontentright");
\</script\>
\</div\>
\</div\>
<div>
\<input type="hidden" name="\__EVENTVALIDATION" id="\__EVENTVALIDATION" value="/wEWAwLqlOHcAQLtmeyGCgLoltq+C5OCI4Pz27UOybtRJaHPg3NtQGb+" /\>
</div></form>
\<!-- Google Analytics --\>
\<script type="text/javascript"\>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
\</script\>
\<script type="text/javascript"\>
var pageTracker = \_gat.\_getTracker("UA-3905157-1");
pageTracker.\_initData();
pageTracker.\_trackPageview();
\</script\>
</body>
</html>
Utan att nagelfara html-koden tror jag att du kan börja med att minska den angivna bredden 1200px & 1000px i #menu, .FullPage och #TopHolder till lite med modesta 800px eller 1024px. 1200px är för brett för de flesta användare idag!
Skulle layouten kollapsa så är det bara att ändra tillbaka.
åh min gud.. jag hittar bara flera problem.. läste i en annan post och hon hadde lite av samma problem som mig, men där påpekades iframes.. och det tror jag det finns hos mig med.
"Varför en iframe? Risken är att många som tittar i lite mindre skärmar kommer få dubbelscroll, vilket är bland det värsta som finns på webben."
Jag gråter snart.. har användt en god del pängar på den till ingen nytte känns det som :-(
tack DanneSt.. ska testa nu :-)
Kollapsade helt av att ändra. Testade lite olika siffror, sidledsscrollern fanns fortfarande kvar oavsett om inget fanns där att visa.
Är det bakgrundsbilden som skojar tro?
Kollade html-koden lite snabbt, och nu förstår jag nog på ett ungefär hur sidan ska se ut - men fortfarande inte helt ändå.
Det finns saker som inte går att se genom att bara pussla ihop html-koden och css-koden, till exempel bakgrundsbilderna samt de flashgrejer som uppenbarligen ska finnas på sidan.
En sak jag inte riktigt får grepp om heller är menyn. Det är en horisontell meny, så mycket förstår jag, men css-koden bör gå att förbättra en hel del där. Bredden måste i alla fall vara galen som sagt var, för nu är den 1200px + 190px (padding-left), alltså 1390px, och det är kanske inte helt önskvärt.
.FullPage är också för bred, och den borde nog inte vara absolutpositionerad heller egentligen...
Att #Content har en fast höjd och overflow-y: scroll är förmodligen också en ganska dålig idé. Men jag ser som sagt var inte exakt hur sidan borde se ut, så det är fortfarande lite gissningar.
länk till sidan tack..
mm, jo.. det är i ett lite känsligt läge Fuel..jag får inte ge ut den ännu. arrghh!
Det jag vill ha jawbreaker, är att sidan inte ska ha scroll alls till en början.
Altså, ramarna platsar och justerar sig automatisk eller optimalt efter vanligaste upplösning.
När man har information så kommer scrollen..
Sidledscrollen är ett absolutt no no för mig.
Be killen ändra det istället. 1200px är ingen normal bredd och det finns ingen normal webbutvecklare som låser en sida efter den storleken.
jag tror nog hällre den är låst på mer enn så. Snarare nånstans på 1390 och DET är i alla fall inte normalt. Ska forsöka få ner den till nånstans rundt 1000. Han har flippat ur för att jag nämnde "problemet" så jag fråger inget. Jag har betalat honom för att leverera ett produkt, så om han börjar få attityd så finns det andra. Om inte länge ska jag anlita nån för att göra ett större program till siten och då har jag inte tid el lust att bekymra mig över om man vågar säja till om nåt är fel. :-)
för min uppl. på 1024 kör du 960 px på wrappern
har testat olika px, men får fortfarande inte bort sidledscrollen..
Tackar Jawbreaker för all hjälp :)
Problemet är nu fixat.
