[CSS] Wat vragen - Softwareontwikkeling

donderdag 27 september 2007 20:27

Acties:

Verwijderd

Topicstarter

Code CSS:

code:

/*------------Basic styles------------*/

b
 {
 font-weight: bold; 
 }
 
table 
 { 
 width: 100%;
 border: 1px solid gray;
 background: white;
 }

td
 { 
 padding: 25;
 }

body 
 { 
 background: #2e3735;
 background-image: url("bg.jpg");
 }

p
  {
 color: black;
 font-family: verdana, arial;
 font-size: 10px;
 }
 
a
 {
 color: orange;
 font-family: verdana, arial;
 font-size: 10px; 
 }

h1
 {
 color: #9900cc;
 font-family: verdana, arial;
 font-size: 20px;
 }

div
  {
 
 }

/*-------------Layout----------------*/

.bigcontainer {
 margin: 0px auto;
 width: 764px;
 text-align:left;
 float: center;
 margin-bottom: 10px;
}

.footer
 {
 color: black;
 font-family: verdana, arial;
 font-size: 8px;
 }
 
.tablefooter
 {
 width: 100%;
 border: 1px solid gray;
 background: #465350;
 }

.rowcontainer {
    float: left;
    margin-bottom: 5px;
    width: 100%;
    overflow: hidden;
    background: white;;
}

.logo {
 float: center;
 width: 762px;
 margin-bottom: 10px;
 padding: 0px;
 background: url('logo.jpg');
 height: 133px;
 border: 1px solid gray;
}

/*------Columns----------*/ 

.fullcolumn { float: left; width: 96%;}     /* Full width column for a one column site */
            
.halfcolumn { float: left; width: 47%;}     /* Half width column for a two column site. */

.onethirdcolumn { float: left; width: 30%; }        /* One third width column for a three column site */

.onethirdcolumn2 { float: left; text-align: right; width: 30%; margin-right: 10px;}     /* One third width column for a three column site */

.quartercolumn { float: left; width: 24.5%; }       /* One quarter width column for a four column site */

.threequartercolung { float: left; width: 65% }

.somespace { float: left; width: 2%; }

Code HTML:

code:

<html>
<head>
<title>SnoepPapier</title>
<meta author="Arjen Voogt">
<link rel="stylesheet" type="text/css" href="snoeppapier.css">
</head>
<body>

<div class="bigcontainer">
 <div class="logo"></div>

<table>
<tr>
<td>

 <div class="rowcontainer">

  <div class="somespace"></div>
  <div class="threequartercolung">

<h1>Justin doet waarschijnlijk niet mee</h1>
<p><b>Tilburg</b> - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Sed a diam eu neque faucibus lobortis. Nunc porta eros at nibh. 
<h1>Nieuws</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a diam eu neque faucibus 
lobortis. Nunc porta eros at nibh. Phasellus lobortis libero in urna. Vivamus sapien urna, 
ultrices a, tempus nec, commodo quis, diam. Quisque placerat ornare erat..</p>

<h1>Nog meer tekst</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a diam eu neque faucibus 
lobortis. Nunc porta eros at nibh. Phasellus lobortis libero in urna. Vivamus sapien urna, 
ultrices a, tempus nec, commodo quis, diam. Quisque placerat ornare erat..</p>
  </div>

  <div class="onethirdcolumn2">

<script type="text/javascript"><!--
google_ad_client = "pub-3739640654686842";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "9900CC";
google_color_text = "000000";
google_color_url = "9900CC";
google_ui_features = "rc:0";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

  </div>
</div>
</div>

<div class="rowcontainer">
 <div class="somespace"></div>
 <div class="fullcolumn2">
<span class="footer">
Copyright (c) 2007 SnoepPapier.
</span>
 </div>
</div>

</td>
</tr>
</table>

</div>
</body>
</html>

Screenshots:

http://img529.imageshack.us/my.php?image=untitled4cf6.jpg
http://img529.imageshack.us/my.php?image=untitled3mk6.jpg

Wat ik nu wil, is hetvolgende:

1 - De footer moet ook apart van het grote blok, net als het logo.
2 - Ik wil afzonderlijke horizontale blokken, dus dat het blok een ruimte heeft tussen het blok en de Google Adsense. Dat het er dus als volgt uit gaat zien:

http://img253.imageshack.us/img253/5706/untitled5oj0.jpg

Bvd.

edit:

3 - In Internet Explorer verschijnt alles links, in FF alles in het midden. Ik wil dit in het midden hebben, hoe kan dit?

[ Voor 43% gewijzigd door F_J_K op 10-11-2007 14:22 . Reden: op verzoek TS geanonimiseerd ]

donderdag 27 september 2007 20:35

Acties:

HyperioN

Wat heb je zelf al geprobeerd en/of gezocht? Hier op GoT willen we graag wat meer eigen initiatief zien.
Dit zijn eigenlijk allemaal vrij basic dingen, we kunnen hier wel de kant-en-klare oplossing geven maar daar leer je zelf niks van.
Waarom heb je trouwens je divs in een table staan? Kan me niet voorstellen dat dat ergens goed voor is..

donderdag 27 september 2007 20:53

Acties:

Verwijderd

Topicstarter

HyperioN. schreef op donderdag 27 september 2007 @ 20:35:
Wat heb je zelf al geprobeerd en/of gezocht? Hier op GoT willen we graag wat meer eigen initiatief zien.
Dit zijn eigenlijk allemaal vrij basic dingen, we kunnen hier wel de kant-en-klare oplossing geven maar daar leer je zelf niks van.
Waarom heb je trouwens je divs in een table staan? Kan me niet voorstellen dat dat ergens goed voor is..

Wat betreft dat eigen initiatief is dit hoe ver ik ben gekomen zonder enige kennis van CSS (of heel weinig) naar deze site. Lijkt me voldoende, toch?

vrijdag 28 september 2007 10:00

Acties:

Verwijderd

Verwijderd schreef op donderdag 27 september 2007 @ 20:53:
[...]

Wat betreft dat eigen initiatief is dit hoe ver ik ben gekomen zonder enige kennis van CSS (of heel weinig) naar deze site. Lijkt me voldoende, toch?

Dat klinkt nog steeds als "ik weet het niet, dus ik zoek niet maar vraag het aan een ander"

Begin eerst eens met fatsoenlijke HTML zou ik zeggen. Die tabellen eruit en ook div's met classes als "somespace". Da's net zo erg als spacer.gif gebruiken. Breng structuur aan in je HTML, en ga daarna eens naar de styling kijken.

[ Voor 24% gewijzigd door Verwijderd op 28-09-2007 10:02 ]

vrijdag 28 september 2007 10:03

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Verdiep je gerust even zélf in de materie voordat je bij ons je probleem neerlegt. Zie ook Scriptrequest.

In het wilde weg in het donker om je heen slaan en hopen dat je iets raakt is natuurlijk niet zo slim. Als je je verdiept in de materie leer je er ook nog eens iets van en kun je gericht zoeken naar het antwoord op je probleem. Als je vanalles copy/paste van websites her-en-der zonder er verder bij na te denken of te snappen waar je mee bezig bent is je project bij voorbaat gedoemd om te mislukken.

Kies trouwens voortaan ook een betere titel voor je topic

[ Voor 56% gewijzigd door RobIII op 28-09-2007 10:11 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij