Πρόβλημα HTML και CSS

bscyb · 31 Μαΐου 2011

οπως βλέπετε η εικόνα εμφανίζεται ποιο κάτω απο το κείμενο εγώ όμως θέλω να είναι δίπλα και επείδη δεν τα πηγαίνω και πολύ καλά με css δεν τα καταφέρνω

html:

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

<head>

<title>Πρακτορείο ταξιδιών Cyclades Travel</title>

</head>

<br />

<ul>

<li><a href="index.php" title="Αρχική σελίδα"><span>Αρχική σελίδα</span></a></li>

<li><a href="services.php" title="Ταξίδια"><span>Ταξίδια</span></a></li>

<li><a href="contact.php" title="Επικοινωνία"><span>Επικοινωνία</span></a></li>

</ul>

</div>

<br />

</div>

<br />

</input>

</form>

</div>

<br />

Σας καλωσορίζουμε ……

<br />

Σε ένα γρήγορο και ευχάριστο ταξίδι με

επιλογή των καλύτερων μεταφορικών μέσων , ξενοδοχείων, και εστιατορίων

που προσφέρουν την πιο φιλική ατμόσφαιρα και τα πιο υψηλά standards.

Ένα ταξίδι μικρότερο η μεγαλύτερο , μιά απόδραση από την καθημερινότητα

στον προορισμό που έχετε επιλέξει, και μαζί μας θα αποφύγετε το άγχος και

τα απρόοπτα, με τη συνοδεία των δικών μας ανθρώπων ,το άριστα οργανωμένο

δίκτυο αντιπροσώπων μας σε όλο τον κόσμο και φυσικά τη δυνατότητα όλες οι

λεπτομέρειες του ταξιδιού σας να οργανωθούν από έναν και μόνο οργανισμό.!

</div>

</div>

<br />

</div>

</body>

</html>

css:

@CHARSET "UTF-8";

body

{

margin:0;

padding:0;

text-align:center;

font:100% Verdana,Arial,Helvetica,sans-serif;

background-image:url(images/backimage.jpg);

}

p {

margin:0 0 10px 0;

padding:0;

}

h4

{

color:#0066FF;

}

div#container

{

margin:auto;

width:938px;

}

div#photo

{

background-color:white;

padding-top:10px;

margin:auto;

width:938px;

length:337px;

}

div#main

{

background-color:white;

width:938px;

}

div#facebook

{

float:left;

padding-left:10px;

}

a[href^=mailto:]

{

float:left;

padding-right: 40px;

padding-bottom:30px;

background: url(images/email.png ) no-repeat center right;

}

div#ipaddress

{

float:right;

padding-right:40px;

color:#153E7E;

}

div#time

{

float:left;

padding-left:32px;

}

div#text1

{

text-align:justify;

width:538px;

padding-left:50px;

padding-right:300px;

color:#25587E

}

body {font-size: 16px;line-height: 1.7em;font-family: Helvetica,Arial, Sans-Serif;}

div#pphoto

{

padding-right:25px;

float:right;

}

TheELF · 31 Μαΐου 2011

Για δοκίμασε και πες μας (κακός χαμός ο κώδικας)

div#text1

{

float:left;

text-align:justify;

width:538px;

padding-left:50px;

padding-right:300px;

color:#25587E

}

dewn735 · 31 Μαΐου 2011

Φτιάξτο με πίνακα να τελειώνεις, δε χρειάζεται να μπλέκεις με divs και css για αυτά τα πράμματα

bscyb · 31 Μαΐου 2011

Για δοκίμασε και πες μας (κακός χαμός ο κώδικας)

Ναι αυτό το δοκίμασα και εγώ αλλά δεν αλλάξε τίποτα

Φτιάξτο με πίνακα να τελειώνεις, δε χρειάζεται να μπλέκεις με divs και css για αυτά τα πράμματα

με πίνακα?

πώς δηλάδη δεν εχώ ίδεα

macabre_sunsets · 31 Μαΐου 2011

Δοκίμασε να το κάνεις κάπως έτσι μήπως και...:

><div id="wrapper">
  <div id="pphoto">...</div>
  <div id="text">...</div>
  <div class="clear"></div>
</div>

>div#wrapper { width: 100%; }
div#pphoto { float: right; ... }
div#text { float: left; ... }
div.clear { clear: both; }

Επίσης θα σου πρότεινα να αποφεύγεις τα πολλά "<br />" και να αρχίσεις να χρησιμοποιείς "margin-top/bottom".

Όσον αφορά τον πίνακα:

><table class="...">
  <tr>
     <td id="text">Καλως ήρθατε ...</td>
     <td id="pphoto"><img ... /></td
  </tr>
</table>

και δεν χρειάζονται τα "float: left/right;".

dewn735 · 31 Μαΐου 2011

<table><tr><td>Το κείμενό σου</td><td><img src='photo.png' /></td></tr></table>

TheELF · 31 Μαΐου 2011

Αν δεν σου χαλάει το σχέδιο...κάνε αυτό.

<div id="text1">

Σας καλωσορίζουμε ……

<br />

<br />

<img src="images/paros.jpg" alt="Πάρος" title="Πάρος" style="float:right;margin:5 5px 5 5;/>

Σε ένα γρήγορο και ευχάριστο ταξίδι με

επιλογή των καλύτερων μεταφορικών μέσων , ξενοδοχείων, και εστιατορίων

που προσφέρουν την πιο φιλική ατμόσφαιρα και τα πιο υψηλά standards.

Ένα ταξίδι μικρότερο η μεγαλύτερο , μιά απόδραση από την καθημερινότητα

στον προορισμό που έχετε επιλέξει, και μαζί μας θα αποφύγετε το άγχος και

τα απρόοπτα, με τη συνοδεία των δικών μας ανθρώπων ,το άριστα οργανωμένο

δίκτυο αντιπροσώπων μας σε όλο τον κόσμο και φυσικά τη δυνατότητα όλες οι

λεπτομέρειες του ταξιδιού σας να οργανωθούν από έναν και μόνο οργανισμό.!

</div>

bscyb · 31 Μαΐου 2011

Τό έκανα με πίνακα αλλά βγήκε έτσι:

θέλω να έχει κενο ασπούμε 100px μεταξύ του κέιμενου και της εικόνας

html:

Σας καλωσορίζουμε ……

<br />

Σε ένα γρήγορο και ευχάριστο ταξίδι με

επιλογή των καλύτερων μεταφορικών μέσων , ξενοδοχείων, και εστιατορίων

που προσφέρουν την πιο φιλική ατμόσφαιρα και τα πιο υψηλά standards.

Ένα ταξίδι μικρότερο η μεγαλύτερο , μιά απόδραση από την καθημερινότητα

στον προορισμό που έχετε επιλέξει, και μαζί μας θα αποφύγετε το άγχος και

τα απρόοπτα, με τη συνοδεία των δικών μας ανθρώπων ,το άριστα οργανωμένο

δίκτυο αντιπροσώπων μας σε όλο τον κόσμο και φυσικά τη δυνατότητα όλες οι

λεπτομέρειες του ταξιδιού σας να οργανωθούν από έναν και μόνο οργανισμό.!

</td>

<td >

</td>

</tr>

</table>

css:

.tph

{

text-align:justify;

color:#25587E;

}

TheELF · 31 Μαΐου 2011

Βάλε την εικόνα με αυτόν τον τρόπο.

<td><img src="images/paros.jpg" alt="Πάρος" title="Πάρος" style="margin:0 0 0 100;"/></td>

bscyb · 31 Μαΐου 2011

Βάλε την εικόνα με αυτόν τον τρόπο.

δεν άλλαξε τίποτα

macabre_sunsets · 31 Μαΐου 2011

><table>
  <tr>
     <td style="width: ...px; padding-right: 100px; text-align: justify;">Κείμενο</td>
     <td>Εικόνα</td>
  </tr>
</table>

bscyb · 31 Μαΐου 2011

ωραία αυτο ήθελε τελικά

για άλλη μια φορά με βοήθησες ευχαριστώ

αλλά δυστύχως έχω άλλο ένα πρόβλημα

κάθε φόρα που φτίαχνω ένα καινούριο div το εμφάνιζει κάτω απο το άσπρο background αυτο διορθώνεται ναι μεν αν βάλω πολλά <br /> πριν το div αλλά δεν πιστεύω ότι είναι και η καλύτερη λύση να γεμίσω με <br /> το site

html:

<br />

<ul>

<li><a href="index.php" title="Αρχική σελίδα"><span>Αρχική σελίδα</span></a></li>

<li><a href="services.php" title="Ταξίδια"><span>Ταξίδια</span></a></li>

<li><a href="contact.php" title="Επικοινωνία"><span>Επικοινωνία</span></a></li>

</ul>

</div>

<br />

</div>

<br />

</input>

</form>

</div>

<br />

Σας καλωσορίζουμε ……

<br />

Σε ένα γρήγορο και ευχάριστο ταξίδι με

επιλογή των καλύτερων μεταφορικών μέσων , ξενοδοχείων, και εστιατορίων

που προσφέρουν την πιο φιλική ατμόσφαιρα και τα πιο υψηλά standards.

Ένα ταξίδι μικρότερο η μεγαλύτερο , μιά απόδραση από την καθημερινότητα

στον προορισμό που έχετε επιλέξει, και μαζί μας θα αποφύγετε το άγχος και

τα απρόοπτα, με τη συνοδεία των δικών μας ανθρώπων ,το άριστα οργανωμένο

δίκτυο αντιπροσώπων μας σε όλο τον κόσμο και φυσικά τη δυνατότητα όλες οι

λεπτομέρειες του ταξιδιού σας να οργανωθούν από έναν και μόνο οργανισμό.!

</td>

<br />

</tr>

</table>

<br />

</div>

<br />

</div>

</body>

</html>

css:

@CHARSET "UTF-8";

body

{

margin:0;

padding:0;

text-align:center;

font:100% Verdana,Arial,Helvetica,sans-serif;

background-image:url(images/backimage.jpg);

}

p {

margin:0 0 10px 0;

padding:0;

}

h4

{

color:#0066FF;

}

div#container

{

margin:auto;

width:938px;

}

div#photo

{

background-color:white;

padding-top:10px;

margin:auto;

width:938px;

length:337px;

}

div#main

{

background-color:white;

width:938px;

}

div#facebook

{

float:left;

padding-left:10px;

}

a[href^=mailto:]

{

float:left;

padding-right: 40px;

padding-bottom:30px;

background: url(images/email.png ) no-repeat center right;

}

div#ipaddress

{

float:right;

padding-right:40px;

color:#153E7E;

}

div#time

{

float:left;

padding-left:32px;

}

body {font-size: 16px;line-height: 1.7em;font-family: Helvetica,Arial, Sans-Serif;}

.tph

{

padding-left:60px;

padding-right:60px;

text-align:justify;

color:#25587E;

}

.pph

{

padding-right:60px;

}

div#mphoto

{

float:left;

}

dewn735 · 1 Ιουνίου 2011

bscyb, ζωγράφισε καλύτερα πως περίπου θες να είναι το τελικό σου σχέδιο, γιατί φωτό στη φωτό δε θα βγάλουμε άκρη...

bscyb · 1 Ιουνίου 2011

βασικά το ασπρο θα πηγαίνει ως το τέλος

αλλά εντάξει βρήκα τη λύση σε αυτο που έψαχνα

margin-bottom:xpx ήθελε

macabre_sunsets · 1 Ιουνίου 2011

Πρόσθεσε το "<div class="clear"></div> μετά το <div> της εικόνας που βάζεις. Έπειτα στο css γράψε ".clear { clear: both; }" και έτοιμος. Δεν χρειάζεται το "margin-bottom". Στην περίπτωσή σου, εάν βάλεις μια εικόνα με μεγαλύτερο ύψος θα χρειαστεί να προσαρμόσεις και το "margin-bottom" αναλόγως, ενώ με το "clear" δεν θα έχεις πρόβλημα.

Σύνδεση

Πρόβλημα HTML και CSS

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

bscyb

TheELF

dewn735

bscyb

macabre_sunsets

dewn735

TheELF

bscyb

TheELF

bscyb

macabre_sunsets

bscyb

dewn735

bscyb

macabre_sunsets

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

Σύνδεση