Προς το περιεχόμενο

Site με css, πως ξεκινάω

drjim

Από τον drjim
στο Web Design - Development

Προτεινόμενες αναρτήσεις

drjim Proficient

drjim

Δημοσ.
Δημοσ.

Καλησπέρα σας, καλώς σας βρήκα.

 

Προσπαθώ να μάθω να στήνω ένα website με css μόνο. Αλλά έχω μερικές δυσκολίες, αν μπορείτε να με βοηθήσετε.

 

Θα ήθελα να μάθω αν ξεκινάω σωστά και γιατί το footer δεν είναι κάτω από τα cube???

 

CSS code

>body {
background-color: ActiveBorder;	
height: 100%;
margin: 0px;
padding: 0px;
}

#wrapper {
width: 950px;
background-color: teal;
height: auto;
margin: auto;
}

#logo {
width: 250px;
height: 70px;
margin: 10px 10px 10px 10px;
background-color: maroon;
}

#logo p {
font-weight: bold;
font-size: 20px;
text-align: center;
}

#header {
background-color: black;
width: 950px;
height: 300px;
margin-top: 20px;
}

#header p {
font-weight: bold;
font-size: 20px;
text-align: center;
color: white;
}

#cube1Left {
width: 300px;
background-color: orange;
float: left;
margin-top: 20px;	
}

#cube1Right {
width: 590px;
background-color: purple;
float: right;	
margin-top: 20px;	
}

#cube2Left {
width: 590px;
background-color: orange;
float: left;
margin-top: 20px;	
}

#cube2Right {
width: 300px;
background-color: purple;
float: right;	
margin-top: 20px;	
}

#footer {
width: 950px;
background-color: green;
}

 

html Code

><!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS TEST</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="logo"><p>LOGO</p></div>
<div id="header">
 <p>Header</p></div>
<div id="cube1Left">
 <p>cube1Left</p>
 <p> </p>
 <p> </p>
 <p> </p>
</div>
<div id="cube1Right">
 <p>cube1Right</p>
 <p> </p>
 <p> </p>
 <p> </p>
</div>
<div id="cube2Left">
 <p>cube2Left</p>
 <p> </p>
 <p> </p>
</div>
<div id="cube2Right">
 <p>cube2Right  </p>
 <p> </p>
 <p> </p>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>

drjim Proficient

drjim

Δημοσ.
  • Μέλος
Δημοσ.

Και τι σημαίνει το clear:both; πότε χρησιμοποιείτε?

Κατά τα άλλα είναι οκ το παραπάνω ή πρέπει να προσέξω κάτι?

Haldol Crazy Insomniac

Haldol

Δημοσ.
Δημοσ.

Με το clear δηλώνεις σε ποιες πλευρές κάποιου element δεν θες να επιτρέπονται floating elements. Παίρνει τιμές left, right, both και none (που είναι none εξ ορισμού).

chrism4111 Proficient

chrism4111

Δημοσ.
Δημοσ.

Γνώμη μου είναι το οτι γράφεις να βλέπεις αν παιζει σωστα σε όλους τους Browsers ... Αν η απεικονιση αυτον που γράφεις γίνετε σωστα τοτε γιατι να είναι λάθος ο τρόπος που το εγραψες;; ... Δεν νομίζω να μπορει κανενας να κρινει τουλαχιστον στην css αν κατι είναι λάθος απο την στιγμή που το αποτέλσμα που φαινετε είναι αυτο που φανταζόταν ο δημιουργος......

 

Για τον συγγεκριμενο κωδικα κατα την γνώμη μου εγω θα έκανα reset όλα τα html tags (εάν ψάξεις στο γοογλε θα βρείς αρκετό έτοιμο υλικο)

Και επίσης θα προσπαθουσα όσο το δυνατον να μειώσω τα attributes όπου δεν χρειάζονται...

drjim Proficient

drjim

Δημοσ.
  • Μέλος
Δημοσ.

Ευχαριστώ παιδιά θα κοιτάξω στο νετ για περισσότερα!

 

Εννοείτε ότι πρέπει να το τεστάρουμε σε όλους τους βασικούς Browsers απλά επειδή είμαι στην αρχή εκμάθησης μήπως δεν κάνω κάτι καλά και δεν θα ήθελα να το μάθω στραβά.

Αρχειοθετημένο

Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.

Προς την λίστα θεμάτων
  • Δημιουργία νέου...