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

Πρόβλημα Με Boxes HTML

Dark-Shadow

Από τον Dark-Shadow
στο Web Design - Development

 Share

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

Dark-Shadow Experienced

Dark-Shadow

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

Καλησπέρα παιδιά. Αντιμετωπίζω ένα προβληματάκι με κάτι boxes (divs). Θέλω να φτιάξω 2 boxes διπλα σε αλλα 2 boxes και δυστυχώς δεν μπορώ να τα καταφέρω. Μήπως θα μπορούσε να με βοηθήσει κάποιος? To layout πρέπει να είναι όπως στην φωτογραφια. Ανεβάζω επίσης το html αρχείο με το css.

post-62422-0-97429900-1333314513_thumb.jpg

Website.zip

nspyrou Proficient

nspyrou

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

Καλησπέρα παιδιά. Αντιμετωπίζω ένα προβληματάκι με κάτι boxes (divs). Θέλω να φτιάξω 2 boxes διπλα σε αλλα 2 boxes και δυστυχώς δεν μπορώ να τα καταφέρω. Μήπως θα μπορούσε να με βοηθήσει κάποιος? To layout πρέπει να είναι όπως στην φωτογραφια. Ανεβάζω επίσης το html αρχείο με το css.

 

Χοντρικά μπορείς να ορίσεις το style του <div> σε float: left. πχ,,

 

>
<div id="DivPanel1" style="float:left">
<h2>Div 1</h2>
</div>

<div id="DivPanel2" style="float:left">
<h2>Div 2</h2>
</div>

<div style="clear:both"></div>

 

Τα παραπάνω div's θα εμφανιστούν δίπλα-δίπλα. Το "Clear:Both" θα αναγκάσει τον "καθαρισμό" του floating.

 

Ελπίζω να σε βοήθησα.

Dark-Shadow Experienced

Dark-Shadow

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

Σε ευχαριστώ παρα πολύ φίλε μου αλλά διστυχώς δεν μπορεσα να το φτιάξω. Μήπως θα μπορούσε να δείς λίγο το index.html και να μου πείς? Ευχαριστώ και πάλι.

nspyrou Proficient

nspyrou

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

Σε ευχαριστώ παρα πολύ φίλε μου αλλά διστυχώς δεν μπορεσα να το φτιάξω. Μήπως θα μπορούσε να δείς λίγο το index.html και να μου πείς? Ευχαριστώ και πάλι.

 

Φαντάζομαι οτι κάτι τέτοιο θα θέλεις υποθέτω. Σου κάνω επισύναψη μόνο του Index.html:

 

Πρόσεξε λίγο τα </div> σου,, υπάρχουν κάποια που δεν ανοίγουν κάπου.index.html

 

Τα Left Panels, είναι μέσα σε ένα Div,(id="left") απ'όσο βλέπω, και το κεντρικό σου div έχει (id="right"). Αυτό που έκανα μόνο, είναι να βάλω στο Div id="left", αυτό, όπως σου εξήγησα και στο προηγούμενο post:

 

>
<div id="left" style="float:left">
..
 <div id="left1"....>
 </div>

 <div id="left2"...>
 </div>
</div>

 

και στο content div, (div="right"):

 

>
<div id="right" style="float:left">
...
</div>

 

Προκειμένου να "καθαρίσεις" τα float, βάζουμε και ένα dummy div, για το clear ...

 

>
 <div style="clear:both"></div>

 

και είσαι έτοιμος,, περίπου. Τώρα βάλε και άλλο ένα div όπως το id="left", και κάντο, πχ, id="MidLeft", και φτιάξε τα widths στο CSS για να χωρέσουν όλα.

 

Θα πρότεινα βέβαια τα styles, να τα μαζέψεις μέσα στο CSS, σε 2 classes, και να χρησιμοποιήσεις το format μέσα από το CSS, για να μην είναι όλα τουρλουμπούκι,, καταλαβαίνεις τι εννοώ :-D

Dark-Shadow Experienced

Dark-Shadow

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

nspyrou σε ευχαριστώ πάρα πολύ. Αντιμετωπίζω επίσης ένα άλλο πρόβλημα, ενώ εχω θέσει title και έχω γραψει κάτι ελληνικά δεν μου τα αναγνωρίζει και βάζει ερωτηματικα. Εκει που κολλάω είναι στο οτι έχω ήδη δοκιμάσει

 

><meta http-equiv="Content-Type" content="text/html; ISO-8859-7"/>

 

αλλά καί

 

><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

nspyrou Proficient

nspyrou

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

nspyrou σε ευχαριστώ πάρα πολύ. Αντιμετωπίζω επίσης ένα άλλο πρόβλημα, ενώ εχω θέσει title και έχω γραψει κάτι ελληνικά δεν μου τα αναγνωρίζει και βάζει ερωτηματικα. Εκει που κολλάω είναι στο οτι έχω ήδη δοκιμάσει

 

><meta http-equiv="Content-Type" content="text/html; ISO-8859-7"/>

 

αλλά καί

 

><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 

Η Index.html όπως στην παραθέτω, μου παίζει κανονικά και στο <title> μου βγάζει κανονικά το λεκτικό "Η Σελίδα μου"

 

>
<!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=8859-7" />
<title>Η Σελίδα μου</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<!--header start -->
<div id="header">
<ul>
<li><a href="#" class="hover">Home</a></li>
<li><a href="#">Tips</a></li>
<li><a href="#">Live Scores</a></li>
<li><a href="#">Odds</a></li>
<li><a href="#">Statistics</a></li>
<li><a href="#">Contact Us</a></li>
<li class="last"><a href="#">About Us</a></li>
</ul>
<a href="index.html"><img src="images/logo.gif" border="0" class="logo" /></a>
<a href="index.html"><img src="images/Ball.gif" border="0" class="txt1" /></a>

</div>
<!--header end -->
<!--body start -->
<div id="body">
<!--left panel start -->
<div id="left" style="float:left">
<!--left1 start -->
<div id="left1">
	<p class="boxTxt1"><img src="images/BET365.gif" alt="Bet365" /> </p>
	<br class="spacer" />
</div>
<!--left1 end -->
<!--left2 start -->
<div id="left2">
	<p class="boxTxt2"></p>
	<br class="spacer" />
</div>
<!--left2 end -->
<br class="spacer" />
</div>
<!--left panel end -->
<!--left-middle panel start -->
<div id="leftMiddle" style="float:left">
<!--left1 start -->
<div id="leftMid1">
	<p class="boxTxt1"><img src="images/BET365.gif" alt="Bet365" /> </p>
	<br class="spacer" />
</div>
<!--left1 end -->
<!--left2 start -->
<div id="leftMid2">
	<p class="boxTxt2"></p>
	<br class="spacer" />
</div>
<!--left2 end -->
<br class="spacer" />
</div>
<!--left-middle panel end -->

<!--right panel start -->
<div id="right" style="float:left">
<p class="rightTop"></p>
<h2>About Jet 30</h2>
<p class="rightTxt1">Jet 30 is a <span>free, tableless, W3C-compliant</span> web design layout by Template World. This template has been tested and proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your tastes in any way you like.</p>
<p class="rightTxt2">We only ask you to not remove "Design by Template World" and the link http://www.templateworld.com from the footer of the template.<br /><br /> <span>These templates are licensed under a Creative Commons Attribution 2.5 License.</span> This means that you are free to modify the design to suit your tastes in any way you like, but you must include the provided link back to Template World.</p>
<p class="rightPic"></p>
<p class="rightBottom"></p>
<br class="spacer" />
</div>
<!--right panel end -->
<div style="clear:both"></div>
<br class="spacer" />

<!--body end -->
<!--bodyBottom start -->
<div id="bodyBottom">
<!--member start -->
<!--member end -->
<div id="member">
 <h2>Member Login</h2>
 <form action="#" method="post" name="member_log_in" id="member_log_in">
   <label>Name:</label>
   <input type="text" name="name" class="txtBox" />
   <label>Password:</label>
   <input type="password" name="name2" class="txtBox" />
<a href="#">A registered member?</a>
<input type="submit" name="go" value="" class="go" />
   <br class="spacer" />
 </form>
 <br class="spacer" />
</div>
<br class="spacer" />
</div>
<!--bodyBottom end -->
<!--footer start -->
<div id="footer">
<ul>
<li><a href="#">Home</a>|</li>
<li><a href="#">About Us</a>|</li>
<li><a href="#">Support</a>|</li>
<li><a href="#">Contact Us</a></li>
 </ul>
  <p class="copyright">All rights reserved.</p>
  <a href="#" class="subscribe">Subscribe</a>
  <a href="http://validator.w3.org/check?uri=referer" target="_blank" class="xht"></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" class="cs"></a>
<p class="design">Designed By : <a href="http://www.templateworld.com">Template World</a></p></div>
<!--footer end -->
</body>
</html>

nspyrou Proficient

nspyrou

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

Εμένα στον FF όπου έχω ελληνικά μου βάζει "?". Τι να φταιει?

 

Ρίξε μια ματιά στο encoding και πες μου, τί έχει επιλεγμένο ο FireFox?

 

Γιατί IE/Chrome/FF που δοκίμασα παίζει μια χαρά ...

defacer Grand Master

defacer

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

Εμένα στον FF όπου έχω ελληνικά μου βάζει "?". Τι να φταιει?

 

Το γεγονός ότι άλλο encoding λές στο head και σε άλλο encoding έχεις σώσει το αρχείο.

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

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