css-πρόβλημα

JohnyBoy88 · 27 Αυγούστου 2013

Καλησπέρα σε όλους έχω το εξής πρόβλημα όταν γραφώ αυτόν τον κώδικα μέσα στο

<style type="text/css">

τα πάντα δουλεύουν όταν όμως βάζω κείμενο μου το εμφανίζει εκτός footer

.footer 
{
 width:900px;
 color:#E8FFD2;
 padding:10px;
 border:1px solid #ccc;
 margin:auto;
 text-align:center;
 height:100px;
 background:#756060;
}

την κλάση την καλώ έτσι

 <p class="footer">Copirght </p>

βάζω photo για να καταλάβετε κιόλας

sougiasdj · 27 Αυγούστου 2013

Μπορείς να γράψεις

.footer p
{
#.#
}

Ή

p.footer 
{
#.#
}

Ουσιαστικά ορίζεις ενα Div με κλάση footer και μέσα στο div γράφεις το <p>....</p>

και εφαρμόζεις το πιο πάνω.

---

Σου έφτιαξα ένα παράδειγμα να το δεις:

http://jsfiddle.net/hZdsp/

Αν αντί για id θες κλάση απλα αλλάζεις το # με . και το id= με class=

---

Μ'αυτό δούλεψε μια χαρά

<html><head>
  
  <style type="text/css">
    .footer 
{
 width:900px;
 color:#E8FFD2;
 padding:10px;
 border:1px solid #ccc;
 margin:auto;
 text-align:center;
 height:100px;
 background:#756060;
}
  </style>

</head>
<body>
  <div>where I'm typing right now 
 </div>

    <p class="footer">   sssss    </p>

</body></html>

Επεξ/σία 27 Αυγούστου 2013 από sougiasdj

migf1 · 28 Αυγούστου 2013

Σε μένα πάντως δούλεψε μια χαρά και το αρχικό style του topic-starter: http://jsfiddle.net/QH8RH/ (έβαλα relative width, αφαίρεσα το height από header & footer και προσέθεσα 2rem margins σε header & footer, αλλά αυτό δεν επηρεάζει σε κάτι).

Επίσης, είναι πιο δομημένο (και σωστό) όταν χρησιμοποιείς div wrappers για τις παραγράφους, όπως ειπώθηκε ήδη, αλλά και χωρίς αυτούς ο κώδικας που έδωσες σε μένα δουλεύει μια χαρά σε Firefox, Chrome & Safari

Ίσως σου κάνει conflict με τίποτα επιπρόσθετα styles που πιθανώς χρησιμοποιείς στην σελίδα σου.

JohnyBoy88 · 28 Αυγούστου 2013

Το έλυσα το θέμα Ευχαριστώ βασικά και οι δυο με βοηθήσατε. Το θέμα είναι ότι δουλεύω σε κώδικα άλλου δηλαδή άλλος το έφτιασε και τώρα το επιδιορθώνω εγώ όσο μπορώ βεβαία. Τώρα έχει προκύψει και άλλο πρόβλημα δεν μπορώ να βάλω το παρά κάτω μενού στο κάντρο δοκίμασα με padding:left και Rigth άλλα τίποτα αν μπορείτε να βοηθήσετε . Σας Ευχαριστώ

#button {
	padding: 0;
}
#button li {
	display: inline;
}
#button li a {
	font-family: Arial;
	font-size:11px;
	text-decoration: none;
	float:left;
	padding: 10px;
	background-color: #2175bc;
	color: #fff;
}
#button li a:hover {
	background-color: #2586d7;
	margin-top:-2px;
	padding-bottom:12px;
}
-----------------------------------------------------
<div >
  <ul id="button">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">F.A.Q</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>

migf1 · 29 Αυγούστου 2013

Δεν έχω καταλάβει που είναι το πρόβλημα. Ο κώδικας που δίνεις δείχνει να λειτουργεί κανονικά: http://jsfiddle.net/VepqM/1/

Xvipes · 29 Αυγούστου 2013

#button { 
width:400px;
position:relative;
margin: 0 auto;
}

το 400px είναι τυχαίο νούμερο προφανώς.

JohnyBoy88 · 5 Σεπτεμβρίου 2013

Λοιπόν βάζω όλο τον κώδικα για να βγάλω άκρη ξέρω εγώ την έκανα την πατατιά ξέρω είναι μπροστά στα μάτια μου αλλά δεν μπορώ να την βρω
1. γιατί το μενού δεν μπαίνει στο κέντρο
2. δεν μπορώ να βάλω εικόνα στο background
ξέρω είναι ηλίθια λάθη αλλά δεν μπορώ να τα βρω

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home</title>
<link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/1/js-image-slider.js" type="text/javascript"></script>
<link href="generic.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="main.css" />
<style type="text/css">

.footer 
{
  height: 59px;
  width: 800px;
  margin: 0 auto;
  color: #fff;
  clear: both;
  padding: 2em 2em;
  background: #000;
  position: relative;
  text-align:center;
}
.header 
{
 width: 900px;
 color: #2A2E36;
 padding: 10px;
 border: 1px solid #ccc;
 height: 150px;
 background: #2A2E36;
 position: relative;
 margin: 0 auto;
}
.naviagtion
{
height: 59px;
  width: 800px;
 position: relative;
  }

#content { 
 width: 900px;
 color: #333;
 border: 1px solid #ccc;
 background: #2A2E36;
 margin: 0 auto;
 padding: 10px;
 height: 800px;
}
#button {
	padding: 0;
}
#button li {
	display: inline;
}
#button li a {
	font-family: Arial;
	font-size:11px;
	text-decoration: none;
	float:left;
	padding: 10px;
	background-color: #2175bc;
	color: #fff;
}
#button li a:hover {
	background-color: #2586d7;
	margin-top:-2px;
	padding-bottom:12px;
}
#button { 
width:400px;
position:relative;
margin: 0 auto;
}


</style>

<body style="background-attachment: fixed; background-repeat: no-repeat;" background="22.jpg">

<!-- Begin Header -->
         <div>
		 <p class="header">
		 <img align=center src="2.jpg">
                My Site		
         </p>				
		 </div>
<!-- End Header -->

<!-- Begin Naviagtion -->
<div class= "naviagtion"> 
  <ul id="button">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">F.A.Q</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
 </div>

<!-- End Naviagtion -->

<!-- Begin Content -->
        <div id="content">
		<align="left" div id="sliderFrame">
        <div id="slider">
            <a href="http://www.menucool.com/javascript-image-slider" target="_blank">
                <img src="images/image-slider-1.jpg"  />
            </a>
            <img src="images/image-slider-2.jpg" alt="" />
            <img src="images/image-slider-3.jpg" alt="" />
            <img src="images/image-slider-4.jpg" alt="#htmlcaption" />
            <img src="images/image-slider-5.jpg" />
        </div>
        
    </div>
	</p>
		</div>


<!---Footer start------>
         <div>
		 <p class="footer">Copirght</p> 
         </div>
<!---Footer End------->



</body>
</html>

Xvipes · 6 Σεπτεμβρίου 2013

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home</title>
<link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/1/js-image-slider.js" type="text/javascript"></script>
<link href="generic.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="main.css" />
<style type="text/css">

.footer 
{
  height: 59px;
  width: 800px;
  margin: 0 auto;
  color: #fff;
  clear: both;
  padding: 2em 2em;
  background: #000;
  position: relative;
  text-align:center;
}
.header 
{
 width: 900px;
 color: #2A2E36;
 padding: 10px;
 border: 1px solid #ccc;
 height: 150px;
 background: #2A2E36;
 position: relative;
 margin: 0 auto;
}
.naviagtion
{
height: 59px;
width: 400px;
position: relative;
margin: 0 auto;
  }

#content { 
 width: 900px;
 color: #333;
 border: 1px solid #ccc;
 background: #2A2E36;
 margin: 0 auto;
 padding: 10px;
 height: 800px;
}
#button {
	padding: 0;
}
#button li {
	display: inline;
}
#button li a {
	font-family: Arial;
	font-size:11px;
	text-decoration: none;
	float:left;
	padding: 10px;
	background-color: #2175bc;
	color: #fff;
}
#button li a:hover {
	background-color: #2586d7;
	margin-top:-2px;
	padding-bottom:12px;
}
#button { 
width:460px;
position:relative;
margin: 0 auto;
}


</style>

<body style="background-attachment: fixed; background-repeat: no-repeat;" background="22.jpg">

<!-- Begin Header -->
         <div>
		 <p class="header">
		 <img align=center src="2.jpg">
                My Site		
         </p>				
		 </div>
<!-- End Header -->

<!-- Begin Naviagtion -->
<div class= "naviagtion"> 
  <ul id="button">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">F.A.Q</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
 </div>

<!-- End Naviagtion -->

<!-- Begin Content -->
        <div id="content">
		<align="left" div id="sliderFrame">
        <div id="slider">
            <a href="http://www.menucool.com/javascript-image-slider" target="_blank">
                <img src="images/image-slider-1.jpg"  />
            </a>
            <img src="images/image-slider-2.jpg" alt="" />
            <img src="images/image-slider-3.jpg" alt="" />
            <img src="images/image-slider-4.jpg" alt="#htmlcaption" />
            <img src="images/image-slider-5.jpg" />
        </div>
        
    </div>
	</p>
		</div>


<!---Footer start------>
         <div>
		 <p class="footer">Copirght</p> 
         </div>
<!---Footer End------->



</body>
</html>

έτσι το θες?

Σύνδεση

css-πρόβλημα

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

JohnyBoy88

sougiasdj

migf1

JohnyBoy88

migf1

Xvipes

JohnyBoy88

Xvipes

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

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

Σύνδεση

Σύνδεση