Gå til innhold

Anbefalte innlegg

Videoannonse
Annonse

Designet i seg sjøl er vel omtrent OK-minus...

Orginal plassering av menyen, det skal du ha... Men heile greia blei litt kjedelig igrunn..

 

Det eg stiller meg mest kritisk til er at all grafikken er kun et einaste stort bakgrunnsbilde på sida, og at boksane ikkje tilpasser seg det som er inni. Anbefaler deg å gå over heile sida på nytt, dele grafikken inn i forskjellige deler, og å faktisk bruke et skikkelig stilark - internt eller eksternt - istede for masse "inline styles".

Lenke til kommentar

- Manglet liksom noe i header, ihvertfall ved siden av meny. Den hang liksom i løse luften.

- Bytt skrift i header, eller ihvertfall få på AA

- Kunne hatt noe mer markant overgang mellom det grønne og det grå. De to fargene lignet litt på hverandre på en måte. Kanskje height 100%

 

Ellers helt greit. Enkelt og greit. Tomhet er det som slår meg først. Virker som siden er bygget opp til å ha mye bra grafikk men så mangler den nettopp det.

 

Edit: Siden kan ikke være bare ett bilde. Virker som den er det. Er den det?

Endret av gordito
Lenke til kommentar
boksane ikkje tilpasser seg det som er inni

er ikke teksten inni boksene? er det det du mener?

Jo, men av og til er boksen masse større enn ka som er nødvendig for å få plass til teksten, og om du putter inn en lang tekst en plass, vil boksen(-ane) bli for kort(-e). Du burde la kver boks vere en div, med en toppdel, en bunndel, og en "midtseksjon" som strekker seg ut i fra kor masse innhold som er i boksen.

 

Ta en titt på korleis eg har gjort det i menyen på http://pink.absentvoid.com

 

<!-- 
All design/layout and content is copyrighted pink.absentvoid.com. 
Using it elsewhere, without contacting webmaster first, and linking to this very site is forbidden, 
and will be regarded as theft. Proper actions will be taken.
-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>pink.absentvoid.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<!-- Header -->
<div id="header">
<h1 class="hide">Pink.absentvoid.com</h1>
</div>

<!-- Menu start -->

<div id="menu">

<!-- FIRST MENU CONTAINER || CSS/Layout tutorials -->

<div class="menu_container">
	<div id="menu_css_layout_headline">
		<h2><span class="hide">CSS/Layout tutorials</span></h2>
	</div>
	<div class="menu_stretch">
		<ul>
			<li><a href="#">Basic CSS</a></li>
			<li><a href="#">Simple pseudoclasses</a></li>
			<li><a href="#">CSS image-rollover</a></li>
			<li><a href="#">Typography</a></li>
		</ul>		
	</div>
	<div class="menu_bottom"></div>	
</div>

<!-- SECOND MENU CONTAINER || Miniguides -->

<div class="menu_container">
	<div id="menu_miniguides_headline">
		<h2><span class="hide">Miniguides</span></h2>
	</div>
	<div class="menu_stretch">
		<ul>
			<li><a href="#">Colorcodes</a></li>
		</ul>
	</div>
	<div class="menu_bottom"></div>
</div>

<!-- COPYRIGHT PARAGRAPH --> 	

<div class="menu_container">
	<div class="menu_top"></div>
		<div class="menu_stretch">
			<p id="copyright">
				All content on these pages are copyrighted Absentvoid.com. 
				All use of graphics, content or other unique features
				without permission is illegal.<br><br>
				<a href="mailto:[email protected]">Webmaster</a>	
			</p>
		</div>
<div class="menu_bottom"></div>	
</div>

</div>

<!-- CONTENT START -->

<div id="main_container">
<div class="content_container">
	<h1 id="latest_news_headline"><span class="hide">Latest news!</span></h1>
	<div class="content_corner_right"></div>
	<div class="content">

     <h1>New site up and running!</h1>
     <p>pink.absentvoid.com up and running! None of the tutorials are loaded 
       up/written yet, but it will come. Within a week or two, I hope to have 
       translated all the tutorials to english, and maybe have written a few 
       more. </p>
   </div>
</div>
<div class="bottom_stretch">
	<div class="bottom_left_corner"></div>
	<div class="bottom_right_corner"></div>	
</div>
<!-- FIRST CONTAINER END -->
</div>
</body>
</html>

 

/* ==================== GENERAL ====================  */
body,html {
background: #95194D url(images/bg_main.gif) repeat-y top left;
margin: 0;
padding: 0;
font-family: "trebuchet MS", tahoma, verdana, arial;

}
a {
text-decoration: none;
}
.hide {
visibility: hidden;
font-size: 10px;
line-height: 10px;
}
img {
border: 0;
}
/* ==================== HEADER ==================== */
div#header {
width: 276px;
height: 282px;
background: url(images/header.jpg) no-repeat top left;
top: 0;
left: 0;
position: absolute;
}
/* ==================== MENU GRAPHICS/LAYOUT ==================== */
div#menu {
top: 65px;
left: 0;
position: absolute;
width: 212px;
}
div.menu_container {
width: 212px;
margin: 15px 0 0 0;
}
div.menu_top {
width: 212px;
height: 12px;
background: url(images/menu_top.gif) no-repeat top right;
font-size: 1px;
line-height: 1px;
}

div#menu_css_layout_headline {
width: 212px;
height: 39px;
background: url(images/css_layout_headline.gif) no-repeat top right;
}

div#menu_miniguides_headline {
width: 212px;
height: 39px;
background: url(images/miniguides_headline.gif) no-repeat top right;
}

div.menu_stretch {
background: url(images/menu_bg.gif) repeat-y top right;
}
div.menu_bottom {
background: url(images/menu_bottom.gif) no-repeat top right;
height: 12px;
}
/* ==================== MENU LIST AND LINK STYLES ==================== */
div.menu_container ul {
margin: 0 0 0 20px;
padding: 0;
}
div.menu_container ul li {
margin: 0;
padding: 0;
list-style: none;
}
div.menu_container ul li a {
color: #95194D;
background: url(images/bullet.gif) no-repeat center left;
padding-left: 12px;
font-size: 0.9em;
line-height: 1em;
}
div.menu_container ul li a:hover {
text-decoration: underline;
color: #BE195E;
}
div.menu_container h2 {
margin: 0;
padding: 0;
}
p#copyright {
font-size: 0.8em;
margin: 0 6px 0 18px;
padding: 0;
color: #95194D;
}
p#copyright a {
color: #95194D;
}
p#copyright a:hover {
color: #FFF;
}
/* ==================== CONTENT CONTAINER ==================== */
div#main_container {
position: absolute;
left: 245px;
top: 80px;
right: 20px;
}
div.content_container {
background: url(images/content_headline_stretch.gif) top left repeat-x;
width: 100%;
}
/* == GRAPHIC LAYOUT == */

h1#latest_news_headline {
background: url(images/latest_news_headline.gif) no-repeat top left;
width: 254px;
height: 39px;
margin: 0;
padding: 0;
float: left;
}

/* == ADD ADDITIONAL HEADLINES HERE == */

div.content_corner_right {
background: url(images/content_right_corner.gif);
float: right;
width: 17px;
height: 39px;
}

div.content_right_border {
background: url(images/content_right_border.gif) repeat-y top right;
width: 12px;
float: right;
}

div.content {
clear:left;
background: url(images/content_left_border.gif) repeat-y top left #EAA9C5;
}

div.bottom_left_corner {
background: url(images/bottom_left_crnr.gif) no-repeat top left;
width: 16px;
height: 16px;
float: left;
}

div.bottom_right_corner {
background: url(images/bottom_right_crnr.gif) no-repeat top left;
width: 16px;
height: 16px;
float: right;
}

div.bottom_stretch {
background: url(images/bottom_stretch.gif) repeat-x top left;
height: 16px;
}

div.content p {
margin: 0;
padding: 10px 20px 0 20px;
font-size: 0.9em;
background: url(images/content_right_border.gif) repeat-y top right;
color: #95194D;
}

div.content h1 {
font-size: 1.2em;
color: #BD5884;
margin: 0;
padding: 0 0 0 22px;
background: url(images/content_right_border.gif) repeat-y top right;
}

Lenke til kommentar

Uhm...

 

1. Jeg har litt brei skjerm, og bakgrunsbildet dukker opp helt til høyre igjen..

2. Det er forskjell på grønnfargen på header og grønnfargen på resten

3. menyen passer definitivt ikke inn som en u-styled liste i headeren

Lenke til kommentar

Hmmm... Bakgrunnsbildet var veldig tregt å laste, selv med skolas eminente bredbånd som ellers er meget raskt. Da så jeg at linkene og resten ellers var ganske så fint UTEN den grønne bakgrunnen.

 

Har du prøvd å finne på en annen bakgrunn?

Prøv med en annen farge, eller kanskje svak grå?

Lenke til kommentar

Først ser jeg en ganske fin, lys grønnfarge. Men så har du klart å sette bg-color til

en STØGG grå farge som overhodet ikke passer inn til det grønne. Hvorfor ikke la

det grønne fylle helt ut? :dontgetit:

 

Arve kommenterer at menyen er originalt plassert. Jo, kanskje. Men jeg er betenkt

på hvor lurt det var å plassere menyen midt i ørska. Så rett og slett litt dummt ut.

 

På "WWW.GUIVARCH.TK" har du ei støgg font. Direkte upassende. At vi skal

komme med forslag til hvilken font som kan passe, blir nok litt vanskelig, men

prøv deg heller litt fram. Du vet det finnes tusenvis av gratis fonts av nokså høy

kvalitet tilgjengelig på nettet. :) I tillegg til ei fancy font trengs AA. Anti-aliasing.

Ble way for hakkete slik det er nå. ;)

 

Hvis det er en slags konkurranse ute å går: Du har potensiale for å få en

bedre side enn dine kamerater. :thumbup: Lykke til videre! Stå på!

Lenke til kommentar

mener å huske at du har lagt ut samme siden til vurdering før, og joda ganske riktig :roll:

men får komme med noe.

 

- om du går inn på linker blir den nederste boksen tom, unødvendig. liker forøvrig ikke layouten. ser ikke heelt poenget med å dele opp innholdet når det henger sammen.

- litt kjedelig header, prøv også med en annen font som nevnt over.

- kanskje også litt brå og rar overgang til bg.

- behagelig tekstfarge

- tekstfargen i menyen passet ikke helt inn, synes heller ikke at plasseringen var topp...

 

litt å ta tak i, men småting. :thumbup:

Endret av Smidt
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...