Som besökare på Hamsterpaj samtycker du till användandet av s.k. cookies för att förbättra din upplevelse hos oss. Jag förstår, ta bort denna ruta!
Annons

Wei, design och lite andra diverse problem

Skapad av csols, 2010-08-16 20:54 i Min hemsida & surftips

715
7 inlägg
0 poäng
csols
Visningsbild
P 29 Hjälte 2 524 inlägg
0
Forum image

There - mitt senaste projekt. Nu behöver jag dock lite hjälp. Meningen är att sida ska vara exakt en webb-läsares längd och bredd (oavsett upplösning) så jag körde på med % istället för px. Men eh, dom där vita rutorna går inte att få någon höjd på om man inte kör med px. Samma sak med menyn och sidfoten, men dom tänkte jag att det kanske fungerar iallfall. Finns det någon lösning på detta problem, eller måste man definiera höjden på allt? :(

Jaja, till nästa problem. Dom två vita rutorna (div's) ligger inuti en annan div. Dessa vill jag kunna "byta ut" med Javascript. Alltså en pil åt höger och en pil åt vänster som man sedan kan använda som "scroll" mellan olika 'nyheter'. Finns det något smidigt sätt att göra detta på, eller är jag ute på djuuupt vatten?

En sista grej, kan man ha en tonad bakgrund med css? alltså ha svart bakgrund på en div och sedan ha en 50%-ig vit bakgrund på en div som ligger över den svart?

Avslutningsvis vill jag bara tacka den/det som tar sig tid att hjälpa mig. Om det bara är förslag på häftiga fonts eller färgscheman jag kan ha hjälp av så är det ändå AWSUME! :)

Blev det för flummigt så får jag väl försöka specificera mig mer, men posta en post itc!

Herp

Är reklamen ivägen? Logga in eller registrera dig så försvinner den!

Derp
Visningsbild
Hjälte 2 101 inlägg
0
EDIT: Eller vänta. Är rutorna divar, tabeller, vad är det? Langa mer info. Har du en extern CSS-mall? Länka den isåfall.

Ingen status

csols
Visningsbild
P 29 Hjälte 2 524 inlägg
Trådskapare
0

Svar till Derp [Gå till post]:
Justja, glömde källkoden :p Här får du den, anyhowz, rutorna är div's. Gillar inte att använda table :s


Ett stycke CSS-kod:
* {
border: none;
padding: 0;
margin: 0;
}
body {
background-color: #000;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

#wrapper {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border: none;
}

#mainmenu {
height: 50px;
width: 100%;
margin: 0;
padding: 0;
border: none;
background-color: #1e1e1e;
}
#mainmenu a {
text-align: center;
text-decoration: none;
color: #000;
line-height: 47px;
}
.mainlink {
height: 50px;
width: 20%;
margin: 0;
padding: 0;
border: 0;
float: left;
background-image: url(mainmenu_bg.jpg);
background-color: #1e1e1e;
}
.mainlink2{
height: 50px;
width: 20%;
margin: 0;
padding: 0;
border: 0;
float: left;
background-color: e1e1e1e1;
background-image: url(mainmenu_gb.jpg);
}

#container {
height: 80%;
width: 100%;
margin: 0;
margin-top: 1%;
padding: 0;
border: none;
background-color: #0F3;
}

#img {
height: 50px;
width: 40%;
margin: 0;
margin-left: auto;
margin-right: auto;
padding: 0;
border: 1px solid #fff;
float: left;
}

#txt {
height: 50px;
width: 59%;
margin: 0;
padding: 0;
border: 1px solid #fff;
float: right;
visibility: 50%;
}

#sidefoot {
height: 50px;
width: 100%;
margin: 0;
margin-top: 1%;
padding: 0;
border: none;
background-color: #999;
background-image: url(mainmenu_gb.jpg);
float: left;
position: absolute ; top: 91%; right: 0px;
}

Ett stycke html-kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >

<head>
<link href="maincss.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="ico.jpg" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CityUngdom</title>
</head>

<body>

<div id="wrapper">

<div id="mainmenu">

<a href="home.html">
<div class="mainlink"
>
Hem
</div>
</a>

<a href="new.html">
<div class="mainlink"
>
Nytt
</div>
</a>

<a href="old.html">
<div class="mainlink"
>
Gammalt
</div>
</a>

<a href="events.html">
<div class="mainlink"
>
Events
</div>
</a>

<a href=" http://www.ckyrkan.se">
<div class="mainlink"
>
Citykyrkan
</div>
</a>
</div>

<div id="container">
<div id="img">
</div>
<div id="txt">
</div>
</div>
<div id="sidefoot">
</div>
</div>

</body>
</html>

Herp

Derp
Visningsbild
Hjälte 2 101 inlägg
0
Testa följande på rutorna:

min-height: 100%;
height: 100%;

Ingen status

csols
Visningsbild
P 29 Hjälte 2 524 inlägg
Trådskapare
0

Svar till Derp [Gå till post]:
Det fungerade inte :(

Herp

csols
Visningsbild
P 29 Hjälte 2 524 inlägg
Trådskapare
0
*Bumpar i förhoppning om att någon annan där ute har svaret* :(

Herp

Recovery
Visningsbild
P 29 Stockholm Hjälte 160 inlägg
0

Svar till csols [Gå till post]:
Vertikal längd/positionering är ett enda stycke smuts om du inte använder de gamla goda verktygen (tables <3). Och varför kan inte de vara fast höjd på?
En annan, förmodligen snyggare, lösning är att du låter vissa element vara 100%, och sedan centrerar innehåll på en fast bredd. Att smeta ut saker över 2500 px som egentligen är gjorda för 1100 ser inte ofta jättesnyggt ut.

Krig är skapta för blodig vinst.


Forum » Mellan Himmel och Jord » Min hemsida & surftips » Wei, design och lite andra diverse problem

Ansvariga ordningsvakter:

Användare som läser i den här tråden just nu

1 utloggad

Skriv ett nytt inlägg

Hej! Innan du skriver om ett potentiellt problem så vill vi påminna dig om att du faktiskt inte är ensam. Du är inte onormal och världen kommer inte att gå under, vi lovar! Så slappna av och gilla livet i några minuter - känns det fortfarande hemskt? Skriv gärna ner dina tankar och frågor, vi älskar att hjälpa just dig!

Den här tråden är äldre än Rojks drömtjej!

Det senaste inlägget i den här tråden skrevs för över tre månader sedan. Är du säker på att du vill återuppliva diskussionen? Har du något vettigt att tillföra eller passar din fråga i en ny tråd? Onödiga återupplivningar kommer att låsas så tänk efter en extra gång!

Hjälp

Det här är en hjälpruta

Här får du korta tips och förklaringar om forumet. Välj kapitel i rullningslisten här ovanför.

Rutan uppdateras automagiskt

När du använder funktioner i forumet så visas bra tips här.


Annons
Annons
Annons
Annons