Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Amenintat cu moartea de un numar ...

La multi ani @AndReW99!

Alegere masina £15000 uk

TVR vrea sa lanseze o platforma d...
 Strategie investie pe termen lung...

Modulator FM ptr auto alimentat p...

orange cablu f.o. - internet fara...

Robinet care comuta traseul
 A fost lansata Fedora 40

Samsung S24 plus

Imi iau un Dell? (Vostro vs others)

Abonati Qobuz?
 transport -tren

Platforma electronica de eviden&#...

Cot cu talpa montat stramb in per...

Sfat achizitie sistem audio pentr...
 

background css

- - - - -
Last Updated: Feb 01 2011 22:17, Started by alex2300 , Jan 27 2011 11:11  
  ·  
  • Please log in to reply
11 replies to this topic

#1
alex2300
Posted 27 January 2011 - 11:11

alex2300

    Junior Member

  • Grup: Members
  • Posts: 226
  • Înscris: 16.04.2009
Salutare!
Am exportat pentru header din Photoshop 3 slice-uri.
1 mare care e in centru
si 2 mai mici care sunt in lateral.

Ca sa pun slice-ul mare in centru nu a fost problema.
Dar cum pun slice-urile laterale?

Am uitat sa mentionez ca cele 3 slice-uri se imbina. Adica, daca tai putin din partea dreapta a slice-ului din stanga nu iese bine, la fel si invers.
Deci practic as vrea sa se taie din imagine in partea cealalta, altfel o rezolvam cu "top left" si "top right"

#2
clemhem
Posted 28 January 2011 - 00:33

clemhem

    Member

  • Grup: Members
  • Posts: 372
  • Înscris: 23.02.2008
Nu prea inteleg ce vrei de fapt. Poti uploada o poza? (ca pentru prosti :D)

#3
alex2300
Posted 28 January 2011 - 09:20

alex2300

    Junior Member

  • Grup: Members
  • Posts: 226
  • Înscris: 16.04.2009

View Postclemhem, on 28th January 2011, 00:33, said:

Nu prea inteleg ce vrei de fapt. Poti uploada o poza? (ca pentru prosti :D)

Aici sunt cele 3 slice-uri:
Attached File  sliceuri.jpg   85.99K   30 downloads

Cel principal este "2".

#4
clemhem
Posted 28 January 2011 - 10:23

clemhem

    Member

  • Grup: Members
  • Posts: 372
  • Înscris: 23.02.2008
Acum am inteles, dar nu inteleg de ce vrei neaparat sa le ai puse separat. De ce nu faci din 1, 2 si 3 un singur slice si il pui ca background la body?

#5
alex2300
Posted 28 January 2011 - 10:35

alex2300

    Junior Member

  • Grup: Members
  • Posts: 226
  • Înscris: 16.04.2009

View Postclemhem, on 28th January 2011, 10:23, said:

Acum am inteles, dar nu inteleg de ce vrei neaparat sa le ai puse separat. De ce nu faci din 1, 2 si 3 un singur slice si il pui ca background la body?

pentru ca oocupa foarte mult din pagina in latime. Si vreau ca sa se vada centrat. Ma intereseaza sa se vada macar slice-ul 2, iar pentru cei cu rezolutie foarte mare sa se vada si celelalte 2 slice-uri(1 si 3) si apoi fundalul.

#6
cristi_diaconu
Posted 28 January 2011 - 12:30

cristi_diaconu

    Junior Member

  • Grup: Members
  • Posts: 77
  • Înscris: 25.07.2008
Sper sa-ti dea cineva o solutie doar folosind CSS, am incercat si n-am reusit si sunt chiar curios.
Dar pana una alta, uite o solutie in JS:

<body>

<div class="left" id="left"></div>
<div class="right" id="right"></div>
<div class="middle" id="middle"></div>

</body>

<style>
.left {  
  width:200px;
  height:600px;
  background-image:url("left.png");
  background-repeat:no-repeat;  
  position:absolute;
}
.middle{
 width:800px;
 height:600px;
 background-image:url("center.png");
 background-repeat:no-repeat;   
 position:absolute;
}
.right {
  width:200px;
  height:600px;
  background-image:url("right.png");
  background-repeat:no-repeat;	
  position:absolute;
}
</style>

<script>
window.onload = window.onresize = function() 
{
  var middle_slice_width = 800;
  var side_slice_width = 200;
  
  var width = document.documentElement && document.documentElement.clientWidth 
		? document.documentElement.clientWidth 
		: document.body.clientWidth;
		
  var middle_pos = (width - middle_slice_width) / 2;  

  document.getElementById('left').style.left = middle_pos - side_slice_width + "px";
  document.getElementById('right').style.left = middle_pos + middle_slice_width + "px";
  document.getElementById('middle').style.left = middle_pos + "px";
}
</script>

#7
alex2300
Posted 28 January 2011 - 14:52

alex2300

    Junior Member

  • Grup: Members
  • Posts: 226
  • Înscris: 16.04.2009
Multumesc mult :) Insa in dreapta apare restul slice-ului cand dau scrool. Este vreo metoda simpla de "crop" in js? Din ce am cautat pe google e destul de complicat. Nu prea am lucrat mult in js si sunt incepator.

#8
cristi_diaconu
Posted 28 January 2011 - 15:21

cristi_diaconu

    Junior Member

  • Grup: Members
  • Posts: 77
  • Înscris: 25.07.2008
Ai putea pune pe body "overflow-x:hidden", dar asa nu vei avea scroll nici daca dimensiunea ferestrei e mai mica decat div-ul "middle"...

Sau din JS setezi width-ul div-ului din dreapta corespunzator. Adaugi la sfarsitul functiei:

var rightSlice = document.getElementById('right');
if (middle_pos + middle_slice_width >= width) 
{
	// daca bucata din mijloc ocupa toata fereastra, ascunde div-ul din dreapta
	rightSlice.style.display='none';  
}
else if (middle_pos + middle_slice_width + side_slice_width > width)
{
	// daca bucata din dreapta trebuie sa apara dar nu in totalitate, miscoreaza width-ul
	rightSlice.style.width = middle_pos;
	rightSlice.style.display='';  
} else {
	// altfel, arata bucata din dreapta in totalitate
	rightSlice.style.width = side_slice_width;
	rightSlice.style.display='';  
}

#9
alex2300
Posted 28 January 2011 - 15:32

alex2300

    Junior Member

  • Grup: Members
  • Posts: 226
  • Înscris: 16.04.2009

View Postcristi_diaconu, on 28th January 2011, 15:21, said:

Ai putea pune pe body "overflow-x:hidden", dar asa nu vei avea scroll nici daca dimensiunea ferestrei e mai mica decat div-ul "middle"...

Sau din JS setezi width-ul div-ului din dreapta corespunzator. Adaugi la sfarsitul functiei:

var rightSlice = document.getElementById('right');
if (middle_pos + middle_slice_width >= width) 
{
	// daca bucata din mijloc ocupa toata fereastra, ascunde div-ul din dreapta
	rightSlice.style.display='none';  
}
else if (middle_pos + middle_slice_width + side_slice_width > width)
{
	// daca bucata din dreapta trebuie sa apara dar nu in totalitate, miscoreaza width-ul
	rightSlice.style.width = middle_pos;
	rightSlice.style.display='';  
} else {
	// altfel, arata bucata din dreapta in totalitate
	rightSlice.style.width = side_slice_width;
	rightSlice.style.display='';  
}

da, dar daca schimb width imi taie din stanga imaginii, nu din dreapta

Edit: Scuze, dadusem background-position pe top right. Aia era problema :) Multumesc.

Edited by alex2300, 28 January 2011 - 15:36.

#10
cristi_diaconu
Posted 28 January 2011 - 16:24

cristi_diaconu

    Junior Member

  • Grup: Members
  • Posts: 77
  • Înscris: 25.07.2008
Mici modificari:
Primul IF poate fi inlocuit cu 

if (middle_slice_width >= width)

Iar al doilea cu

else if (middle_pos < side_slice_width)

Acelasi lucru, dar reduci din calcule

#11
alex2300
Posted 29 January 2011 - 20:44

alex2300

    Junior Member

  • Grup: Members
  • Posts: 226
  • Înscris: 16.04.2009
Multumesc mult de raspunsuri. Mai am o intrebare:
Cum sa bag si footerul? Am incercat in mai multe feluri dar nu reusesc.
Am urmatorul cod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
* {
	margin:0px;
	padding:0px;
}

body {
	background: url(images/bg.jpg) repeat;
}


.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto 293px;
}



.left {  
  width:250px;
  height:360px;
  background-image:url("images_new/header1.jpg");
  background-repeat:no-repeat;  
  background-position: top left; /* */
  position:absolute;
}

.middle{
width:960px;
height:360px;
background-image:url("images_new/header.jpg");
background-repeat:no-repeat;  
  background-position: top center; /* */
position:absolute;
}

.right {
  width:250px;
  height:360px;
  background-image:url("images_new/header2.jpg");
  background-repeat:no-repeat;	
  position:absolute;
}

.content {
	margin-top: 360px;
	background:url("images_new/content.jpg") repeat-y;
	width: 640px;
}

.articole {
	padding-left: 50px;
	background:url("images_new/content_sus.jpg") no-repeat;
}

.sidebar {
	margin-top: 360px;
	background: url("images_new/side2.jpg") repeat-y;
	float:right;
}

.sidebar_content {
	padding-top: 50px;
	background: url("images_new/side1.jpg") no-repeat;
	width: 320px;
	height: 242px auto;
}

.sidebar_end {
	background: url("images_new/side3.jpg") no-repeat;
	width: 320px;
	height: 242px;
}

.lateral1 {
	margin-top: 360px;
	background: url("images_new/lateral1.jpg") no-repeat;
	width: 250px auto;
	height: 640px;
}

.lateral2 {
	margin-top: 360px;
	background: url("images_new/lateral2.jpg") no-repeat;
	width: 250px auto;
	height: 640px;
}

.footer {
	background: url("images_new/footer.jpg") no-repeat;
	height: 293px;
}


</style>

<script type="text/javascript">
window.onload = window.onresize = function()
{
  var middle_slice_width = 960;
  var side_slice_width = 250;
  
  var width = document.documentElement && document.documentElement.clientWidth
		? document.documentElement.clientWidth
		: document.body.clientWidth;
		
		
  var middle_pos = (width - middle_slice_width) / 2;  

  document.getElementById('left').style.left = middle_pos - side_slice_width + "px";
  // document.getElementById('right').style.left = middle_pos + middle_slice_width + "px";
  document.getElementById('right').style.left = middle_pos + middle_slice_width + "px";
  document.getElementById('middle').style.left = middle_pos + "px";
  
  
  var rightSlice = document.getElementById('right');
if (middle_pos + middle_slice_width >= width)
{
	// daca bucata din mijloc ocupa toata fereastra, ascunde div-ul din dreapta
	rightSlice.style.display='none';  
}
else if (middle_pos + middle_slice_width + side_slice_width > width)
{
	// daca bucata din dreapta trebuie sa apara dar nu in totalitate, miscoreaza width-ul
	rightSlice.style.width = middle_pos;
	rightSlice.style.display='';  
} else {
	// altfel, arata bucata din dreapta in totalitate
	rightSlice.style.width = side_slice_width;
	rightSlice.style.display='';  
}

}
</script>

</head>


<body>

<div class="wrapper">
		
		<div class="left" id="left"><div class="lateral1"></div></div>
		<div class="right" id="right"><div class="lateral2"></div></div>
		<div class="middle" id="middle">
		
		<div class="sidebar"><div class="sidebar_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget massa in lorem egestas vestibulum. Morbi erat urna, tempor et ornare ut, ullamcorper non magna. Mauris ultrices placerat dictum. Curabitur nisl est, faucibus auctor adipiscing nec, blandit ut nibh. Nam suscipit lectus sed urna elementum viverra. Aenean dapibus aliquam felis molestie mattis. Nulla pharetra suscipit eros, sed tristique risus bibendum ac. Pellentesque luctus blandit nunc, id gravida dolor posuere a. Proin viverra, velit id tempus placerat, tortor arcu viverra tellus, fermentum dignissim ante est sollicitudin urna. Etiam eget sem eu libero dictum imperdiet. Curabitur congue fermentum nunc sed ornare. Nam rhoncus rhoncus enim, sed dapibus massa dapibus sed. Morbi lobortis dui eget erat congue sed vulputate mi porta. Nunc consectetur varius ornare. Praesent eu eleifend nisl. Donec sed nulla id quam tincidunt vestibulum. Donec vel metus sapien. </div> <div class="sidebar_end"></div></div>
		
		<div class="content"><div class="articole">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget massa in lorem egestas vestibulum. Morbi erat urna, tempor et ornare ut, ullamcorper non magna. Mauris ultrices placerat dictum. Curabitur nisl est, faucibus auctor adipiscing nec, blandit ut nibh. Nam suscipit lectus sed urna elementum viverra. Aenean dapibus aliquam felis molestie mattis. Nulla pharetra suscipit eros, sed tristique risus bibendum ac. Pellentesque luctus blandit nunc, id gravida dolor posuere a. Proin viverra, velit id tempus placerat, tortor arcu viverra tellus, fermentum dignissim ante est sollicitudin urna. Etiam eget sem eu libero dictum imperdiet. Curabitur congue fermentum nunc sed ornare. Nam rhoncus rhoncus enim, sed dapibus massa dapibus sed. Morbi lobortis dui eget erat congue sed vulputate mi porta. Nunc consectetur varius ornare. Praesent eu eleifend nisl. Donec sed nulla id quam tincidunt vestibulum. Donec vel metus sapien.
<br /><br />
Curabitur consequat arcu at felis rhoncus at interdum metus egestas. Aenean in turpis vel libero accumsan faucibus at in nisl. Mauris semper, magna sit amet adipiscing imperdiet, eros mauris auctor nunc, vitae congue ligula libero nec tellus. Integer semper auctor diam id hendrerit. Vestibulum condimentum justo non justo ultricies euismod. Integer eleifend, felis non viverra placerat, magna dolor sagittis odio, vel auctor mauris augue ullamcorper justo. Vivamus at ultricies risus. Integer dictum, leo et fermentum egestas, nibh est semper mauris, vel sollicitudin nulla eros ac mi. Vestibulum laoreet sollicitudin massa, id condimentum risus facilisis vel. Pellentesque eu augue nunc. Praesent orci nibh, posuere non condimentum quis, pharetra sollicitudin nunc. Ut suscipit sagittis ante, sed suscipit nunc interdum ac. Curabitur id eros a erat fringilla adipiscing a sed ante. Nunc non augue elementum dolor feugiat blandit vel ac velit. Suspendisse hendrerit, tellus eget eleifend tristique, libero magna aliquam augue, vitae egestas mauris leo sed ipsum. Ut sed rutrum tellus. Aliquam neque nisl, ultrices non euismod non, imperdiet ut libero. Vivamus sagittis tempor leo, in malesuada lorem hendrerit ac. Integer tempus dictum laoreet.
<br /><br />
Vivamus vulputate erat fringilla dolor tincidunt et condimentum sem porttitor. Donec at adipiscing dolor. Cras sed lectus nunc, vitae interdum ante. In tincidunt imperdiet lacinia. Aliquam non eros leo. Integer condimentum diam id orci suscipit fringilla. Aenean aliquam adipiscing consectetur. Fusce adipiscing eleifend dapibus. Vivamus imperdiet porttitor justo vitae consequat. Cras auctor elit vitae lorem imperdiet malesuada.
<br /><br />
Vestibulum a quam mi. Integer ac elit at purus sodales congue ac ac enim. Mauris aliquet libero vel justo pharetra suscipit. Pellentesque quam leo, consectetur ut vulputate facilisis, imperdiet sit amet lectus. Maecenas pellentesque malesuada interdum. Cras molestie dignissim magna, quis varius urna luctus in. In vestibulum viverra diam, ac fermentum nibh tristique ac. Duis fringilla turpis tempus nibh vehicula ut fringilla dolor ullamcorper. Curabitur consequat vehicula pharetra. Duis eget est nec dui malesuada suscipit luctus tempus nisi. Phasellus aliquam augue eget sapien luctus congue. In vestibulum ipsum a neque scelerisque at porttitor mauris auctor. Aliquam ornare, sapien sed auctor ultricies, nunc metus iaculis ante, nec aliquam leo nibh vitae mauris.
<br /><br />
Cras ullamcorper lobortis nisl, in blandit ante bibendum sed. Suspendisse id nulla at purus porta lobortis. Nunc commodo sem ac sapien vehicula elementum. Cras iaculis aliquam diam, eget dignissim magna accumsan id. Vestibulum quis vestibulum mi. Nullam et lobortis eros. Vestibulum tortor diam, gravida et viverra non, dapibus a tellus. Mauris tempus mi in ligula imperdiet venenatis. Praesent vel aliquam enim. Quisque tincidunt justo at nisi feugiat tincidunt. Aliquam nec velit eu elit tincidunt faucibus in eget justo. Duis eu gravida massa.  </div></div>
		</div>
		
</div>

<div class="footer">&copy; Copyright 2011</div>
</body>

Ce gresesc? De ce nu apare footerul cum trebuie?

#12
alex2300
Posted 01 February 2011 - 22:17

alex2300

    Junior Member

  • Grup: Members
  • Posts: 226
  • Înscris: 16.04.2009
S-a rezolvat. Am pus divul cu footerul in divul "content" si am pus margin-left: -150px

Anunturi

Second Opinion Second Opinion

Folosind serviciul second opinion ne puteți trimite RMN-uri, CT -uri, angiografii, fișiere .pdf, documente medicale.

Astfel vă vom putea da o opinie neurochirurgicală, fără ca aceasta să poată înlocui un consult de specialitate. Răspunsurile vor fi date prin e-mail în cel mai scurt timp posibil (de obicei în mai putin de 24 de ore, dar nu mai mult de 48 de ore). Second opinion – Neurohope este un serviciu gratuit.

www.neurohope.ro
Back to Markup Languages

▶ 0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Forumul Softpedia
  2. → Professional Zone
  3. → Programming
  4. → Markup Languages
Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate