Βοήθεια με resize...

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
PanosPss
Δημοσιεύσεις: 78
Εγγραφή: 10 Μάιος 2008 19:53

Βοήθεια με resize...

Δημοσίευση από PanosPss » 18 Ιουν 2013 06:55

Γειά σε όλους!

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

Γενικά όταν είναι full screen ο browser (Mozilla Firefox) όλα κανονικά (δηλαδή το κόκκινο πιάνει όλη την οθόνη) αλλά όταν κάνω resize χάνετε και εμφανίζεται το άσπρο :(

Τι φταίει ρε παιδιά γιατί βασανίζομαι μέρες με αυτό :(
Συνημμένα
sos.png

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Βοήθεια με resize...

Δημοσίευση από alou » 18 Ιουν 2013 08:40

Σε αυτή την περίπτωση η εικόνα δε λέει πολλά δυστυχώς :D
πρέπει να δούμε την html και αν υπάρχει ξεχωριστό αρχείο .css ή κομμάτι <style> μέσα στο αρχείο.

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

Βοήθεια με resize...

Δημοσίευση από giannis17 » 18 Ιουν 2013 10:38

Ποιος ο λόγος να το κάνεις με εικόνα;

Κώδικας: Επιλογή όλων

.header&#123;
background-color&#58;red;
display&#58;block;
width&#58;100%;
height&#58; 80px;
text-align&#58;center;
vertical-align&#58; middle;
font&#58;20px serif;
&#125;
και γράφεις μέσα στο div την επικεφαλίδα.

Κώδικας: Επιλογή όλων

<div class="header">ΕΠΙΚΕΦΑΛΙΔΑ</div>
"There is only one problem with common sense; it’s not very common."
&#8211; Milt Bryce

PanosPss
Δημοσιεύσεις: 78
Εγγραφή: 10 Μάιος 2008 19:53

Βοήθεια με resize...

Δημοσίευση από PanosPss » 18 Ιουν 2013 15:53

Σας ευχαριστώ πολύ! Δεν το εχω δοκιμάσει ακόμα γιατί είμαι στην σχολή μου αλλά μόλις πάω σπίτι θα ανεβάσω και τον κώδικά μου και θα το δοκιμάσω!

PanosPss
Δημοσιεύσεις: 78
Εγγραφή: 10 Μάιος 2008 19:53

Βοήθεια με resize...

Δημοσίευση από PanosPss » 19 Ιουν 2013 04:33

Κώδικας: Επιλογή όλων

@CHARSET "UTF-8";

body &#123;
	margin&#58; 0 auto;
&#125;


/* ===============================================================
   =========== &#91;Πάνω τμήμα&#93; Τίτλος και μενού πλοήγησης =========== 
   =============================================================== */

#top_background &#123;
	width&#58; 100%;
	margin&#58; 0 auto;
	position&#58; absolute;
	background-color&#58; #b50000;
	background-repeat&#58; repeat-x;
	border-bottom&#58; 2px solid #000000;
&#125;

#top_frame &#123;
	width&#58; 1024px;
	margin&#58; 0 auto;
	padding-top&#58; 5px;
	padding-bottom&#58; 5px;

&#125;

#title_frame &#123;
	float&#58; left;
&#125;

#menu_frame &#123;
	float&#58; right;
	padding-top&#58; 4px;
&#125;

#title_frame_style &#123;
	color&#58; #ffffff;
	font-size&#58; 25px;
	font-weight&#58; bold;
	text-align&#58; left;
&#125;

#menu_frame_style &#123;
	color&#58; #ffffff;
	font-size&#58; 18px;
	font-weight&#58; bold;
	text-align&#58; left;
&#125;
Αυτός είναι ο κώδικας css που έχω γράψει και μου το δίχνει έτσι όταν κάνω resize το browser :/

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

Βοήθεια με resize...

Δημοσίευση από giannis17 » 19 Ιουν 2013 09:36

#top_background {
width: 100%;
margin: 0 auto;
position: absolute;
background-color: #b50000;
background-repeat: repeat-x;
border-bottom: 2px solid #000000;
}
Το auto στο margin δεν χρειάζεται, είτε το κάνεις 0 ή βγάζεις το margin εντελώς.
background-repeat δεν κάνει κάτι αν δεν έχεις ορίσει εικόνα για background οπότε το βγάζεις κι αυτό.
Πρόσθεσε ένα display:block; για σιγουριά και δες το.

Αν έχεις πάλι πρόβλημα δείξε μας και το html μήπως το λάθος σου είναι εκεί (div nesting?)
"There is only one problem with common sense; it’s not very common."
&#8211; Milt Bryce

PanosPss
Δημοσιεύσεις: 78
Εγγραφή: 10 Μάιος 2008 19:53

Βοήθεια με resize...

Δημοσίευση από PanosPss » 19 Ιουν 2013 18:20

Αφού έκανα τις αλλαγές που μου είπες όταν είμαι full size στο browser μου το εμφανίζει μέχρι την μέση το κόκκινο φόντο όπως φαίνετε στην εικόνα... ενώ όταν κάνω resize όλα καλα...

Ο κώδικας HTML είναι αυτό:

Κώδικας: Επιλογή όλων

<?php 

include&#40;"scripts/php/site_info.php"&#41;;

if&#40;$website_mode == 0&#41; &#123;

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php include&#40;"scripts/php/site_info.php"&#41;; echo&#40;$site_title&#41;; ?> | Αρχική σελίδα!</title>
<link rel="stylesheet" href="styles/general_style.css" />
</head>

<body>

<div id="top_background">
	<div id="top_frame">
		<div id="menu_frame">
			dfsadfasd
		</div>
	</div>
</div>

</body>
</html>

<?php 

&#125;
else &#123;
	//
&#125;

?>
Συνημμένα
122.png

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 411
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Βοήθεια με resize...

Δημοσίευση από apsuh0s » 19 Ιουν 2013 20:47

Παίξε με αυτά τα τρία στον editor που χρησιμοποιείς για να καταλάβεις τη λογική

Στο τέλος είναι το δικό σου markup

Κώδικας: Επιλογή όλων

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>project</title>
<style>
	*	&#123;
		margin&#58; 0;
		padding&#58; 0;
		color&#58; white;
	&#125;
	.top-bar	&#123;
		background-color&#58; crimson;
		padding&#58; 10px 0;
	&#125;
	.constrain	&#123;
		width&#58; 960px;
		margin&#58; 0 auto;
	&#125;
</style>
</head>
<body>
	<div class="top-bar">
    	<div class="constrain">
        	<h1>Freestuff</h1>
        </div><!-- /.constrain -->
    </div><!-- /.top-bar -->
</body>
</html>

Κώδικας: Επιλογή όλων

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>project</title>
<style>
	*	&#123;
		margin&#58; 0;
		padding&#58; 0;
		color&#58; white;
	&#125;
	.top-bar	&#123;
		background-color&#58; crimson;
		padding&#58; 10px 0;
	&#125;
	.constrain	&#123;
		width&#58; 85%;
		margin&#58; 0 auto;
	&#125;
</style>
</head>
<body>
	<div class="top-bar">
    	<div class="constrain">
        	<h1>Freestuff</h1>
        </div><!-- /.constrain -->
    </div><!-- /.top-bar -->
</body>
</html>

Κώδικας: Επιλογή όλων

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>project</title>
<style>
	*	&#123;
		margin&#58; 0;
		padding&#58; 0;
		color&#58; white;
	&#125;
	.top-bar	&#123;
		background-color&#58; crimson;
		padding&#58; 10px 0;
		text-align&#58; center;
	&#125;
</style>
</head>
<body>
	<div class="top-bar">
        	<h1>Freestuff</h1>
    </div><!-- /.top-bar -->
</body>
</html>

Κώδικας: Επιλογή όλων

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>project</title>
<style>
/* =================================================== */
/* Μπορείς να το αγνοήσεις αν έχεις τα δικά σου resets */
body	&#123;
	margin&#58; 0;
	color&#58; white;
&#125;
/* =================================================== */
#top_background &#123;
   background-color&#58; #b50000;
   border-bottom&#58; 2px solid #000000;
   padding&#58; 10px 0;
&#125;
#top_frame &#123;
   width&#58; 1024px; /* μεγάλο είναι.. */
   margin&#58; 0 auto;
&#125;
#menu_frame &#123;
	/* Δε χρειάζεται κάτι */
&#125;
#menu_frame_style &#123;
	/* Δε δίνεις κάτι τέτοιο στο markup */
&#125; 
</style>
</head>
<body>
<div id="top_background">
   <div id="top_frame">
      <div id="menu_frame">
         Freestuff
      </div>
   </div>
</div>
</body>
</html>
.ninja { color: black; visibility: hidden !important; }

Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης