Страннен проблем..

J

justspy

Registered
Здравейте, докато си кодирах дизайна, ми се получи един страннен проблем, кутийката ми несе разтяга, а аз симолирам всичко с css, тоест нямам никакви картинки, ето кода, html и css и една картинка да видите как става

00c0668862258e62.PNG


HTML

Код: 
<div id="shopcar">
		 <div id="shopcar-top"></div><br /> 
		 <div id="shopcar-down">
		 Текст,текст,текст,текст,текст,текст,текст,текст,текст,текст,
		 Текст,текст,текст,текст,текст,текст,текст,текст,текст,текст,
		 Текст,текст,текст,текст,текст,текст,текст,текст,текст,текст,
		 Текст,текст,текст,текст,текст,текст,текст,текст,текст,текст,
		 Текст,текст,текст,текст,текст,текст,текст,текст,текст,текст,
		 Текст,текст,текст,текст,текст,текст,текст,текст,текст,текст
		 </div> 
		 </div>


CSS

Код: 
#shopcar {
	position:absolute;
	left:508px;
	}
	
	#shopcar-top {
	background:url('../images/shopcar-top.png') no-repeat;
	height:25px;
	width:227px;
    }
	
	#shopcar-down {
	background:#2271aa repeat-y;
	width:220px;
	height:100%;
	border:1px solid #4796d3;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
	}
 
Пробвай така при мене стана :P


Код: 
#shopcar {
   position:absolute;
   left:508px;
   }
   
   #shopcar-top {
   background:url('../images/shopcar-top.png') no-repeat;
   height:25px;
   width:227px;
    }
   
   #shopcar-down {
   background:#2271aa repeat-y;
   width:400px;
   height:100%;
   border:1px solid #4796d3;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
   }
 
То така добре, става, но не просто ей така съм написал да е широка 227 px, трябва да има някаква съотношение между горното меню и кутийката :?:

Едит : Даже и така несе разтяга, като се добави още текст настрани пак се бъгва :?:
 
Пробвай така

Код: 
<div id="shopcar"> 
       <div id="shopcar-top"></div><br />  
       <div id="shopcar-down"> 
       <p>Текст,текст,текст,текст,текст,текст,текст,текст,текст,текст, 
       Текст,текст,текст,текст,текст,текст,текст,текст,текст,текст, 
       Текст,текст,текст,текст,текст,текст,текст,текст,текст,текст, 
       Текст,текст,текст,текст,текст,текст,текст,текст,текст,текст, 
       Текст,текст,текст,текст,текст,текст,текст,текст,текст,текст, 
       Текст,текст,текст,текст,текст,текст,текст,текст,текст,текст
       </p>
       </div>  
       </div>

Код: 
#shopcar { 
   position:absolute; 
   left:508px; 
   } 
    
   #shopcar-top { 
   background:url('../images/shopcar-top.png') no-repeat; 
   height:25px; 
   width:227px; 
    } 
    
   #shopcar-down { 
   background:#2271aa repeat-y; 
   width:220px; 
   height:100%; 
   border:1px solid #4796d3; 
   }
   
      #shopcar-down p { 
	  margin: 0 0 0 0 ;
	  
   }


Със маргина тук #shopcar-down p можеш да си позиционираш само текста,така няма да ти изхвърча навън.
 
Не :?: къкво да го позиционирам, като кутийката несе разтяга, както и да го намествам е все тая :idea:
 
1. Да вземеш да сложи по един спейс след запетайката, че така ти взима взичкото за една дума и сътветно дълга дума не може да е пренесе.

2. Ако не се научиш да ползваш float , ще имаш големи главоболия за в бъдеще:

#shopcar {
position:absolute;
left:508px;
}
Увеличете...

3.Просто не задавай височина тук, или задай така:

#shopcar-down {
background:#2271aa repeat-y;
width:220px;
min-height:200px;
border:1px solid #4796d3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
Увеличете...
 
еми братле същата работа.. пак не пренася на нов ред .. и интервал сложих, а това за float-а, тя картинката реално излиза в средата на страница, защото на главния див съм му задал aling="center" и така, де аз искам да го мърдна под главното меню, а от главното меню до края на страницата има около 500px ако задам float:left; пак ще трябва да го мърдам, само дето надясно :D
 
спрете да говорите глупости всички :D
сложи след всяка запетайка празно място и да видиш как тряя да си слязат на следващия ред :)
 
#shopcar {
position:absolute;
left:508px;
}

#shopcar-top {
background:url('../images/shopcar-top.png') no-repeat;
height:25px;
width:227px;
}

#shopcar-down {
background:#2271aa repeat-y;
width:220px;
height:100%;
border:1px solid #4796d3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
Увеличете...
просто го махни и виж какво ще стане
 
marian каза:
CSS
#shopcar-down {
word-wrap:break-word;
background:#2271aa repeat-y;
width:220px;
height:100%;
border:1px solid #4796d3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
Увеличете...
Увеличете...



Братле стана !! :?: може ли само да ми обясниш за тази функция word-wrap ..
 
http://www.css3.info/preview/word-wrap/
Когато достигне до края на някакъв таг (примерно див с дължина 30px) разделя думите и ги слага на нов ред (прави същото като функцията на пхп wordwrap)
Използва се също при textarea-та
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе