Retour à Forum de site web

Positionnement CSS, je ne peux pas faire les choses

  • Danny1337
  • Student
  • Student
  • No Avatar
  • Inscription: Mai 14, 2006
  • Messages: 70
  • Loc: Norway
  • Status: Offline

Message Janvier 21st, 2009, 4:58 pm

Alright, ive travaille sur un site web pour quelques jours, et j'ai un problème avec css. Ive fait php depuis quelques années déjà, mais je pense que le design n'est pas de mon truc. Anyways, Ive essayé et voici mon problème.
Im, deux boîtes, l'une d'elles contient les dernières entrées de forum de liens, et la seconde, qui est censée être placée sous la première case avec un petit décalage entre eux, contient des liens et d'autres choses, comme ceci:

______
| Box1 |
|....... |
|....... |
______
| Box2 |
|....... |
|....... |


Toutefois, depuis la première case contient différentes la longueur du texte (en raison de différents noms de fil), la première case doivent parfois stretch bas, et le chevauchement de la deuxième boîte. À l'heure actuelle, ive fixer une hauteur fixe sur box1, avec overflow: hidden; comme une solution temporaire, mais comme vous le savez, sa m'agace lol.
Oh, et sur Box2, id comme pour étirer le bas de l'emballage, il est, si son possible, depuis le height: 100%; ne fonctionne pas.

si vous avez besoin de voir la réalité, voici le site ive travaille sur http://animazed.net
Les boîtes sont ceux qui occupent le côté droit.

Merci pour votre temps! Aussi, si vous voyez une sorte de bug s'il vous plaît me dire à ce sujet / finalement ce que je peux faire pour améliorer le site, merci


edit *
pour le rendre plus clair, ce dont j'ai besoin, c'est quand box1 est l'étirement vers le bas, j'ai besoin de Box2 à descendre avec elle pour l'empêcher de se chevauchaient.
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Janvier 21st, 2009, 4:58 pm

  • kbergmann
  • Expert
  • Expert
  • Avatar de l’utilisateur
  • Inscription: Déc 04, 2007
  • Messages: 659
  • Loc: USA
  • Status: Offline

Message Janvier 22nd, 2009, 8:38 am

Mauvais aider après le travail. Êtes-vous actuellement les boîtes flottantes?
  • Danny1337
  • Student
  • Student
  • No Avatar
  • Inscription: Mai 14, 2006
  • Messages: 70
  • Loc: Norway
  • Status: Offline

Message Janvier 22nd, 2009, 9:21 am

Non, ils ne semblent pas au bon endroit si je flotte utilisation. En ce moment je position d'utilisation: absolute; ce qui n'est qu'une solution temporaire. Ceci est box2

Code: [ Select ]
#content_box2
{
    position: absolute;
    top: 180px;
    right: 0px;
    width: 195px;
    background-color:#888;
    text-align:left;
    padding: 2px;
    overflow:hidden;
    color: #ccc;
    font-size: 13px;
    font-weight:lighter;
}
  1. #content_box2
  2. {
  3.     position: absolute;
  4.     top: 180px;
  5.     right: 0px;
  6.     width: 195px;
  7.     background-color:#888;
  8.     text-align:left;
  9.     padding: 2px;
  10.     overflow:hidden;
  11.     color: #ccc;
  12.     font-size: 13px;
  13.     font-weight:lighter;
  14. }
  • kbergmann
  • Expert
  • Expert
  • Avatar de l’utilisateur
  • Inscription: Déc 04, 2007
  • Messages: 659
  • Loc: USA
  • Status: Offline

Message Janvier 22nd, 2009, 5:19 pm

Cela fonctionnera pour vos fins. Ill vous permettent de jongler avec les CSS. J'ai fait tous les en ligne de type B / C Je suis paresseux :)

Code: [ Select ]
<!-- outer box -->
<div style="width:700px;background-color:#66ff66; color:#ffffff;">

<!-- blue float left holder box -->
<div style="float:left; width:300px; z-index:2; background-color:#0044aa;">

<div>PHP Box for stuff 1</div>

<div>PHP Box for stuff 2</div>

</div>
<!-- black float right box -->
<div style="float:right; position:top right;width:400px; background-color:#000001;">
I<br />
AM<br />
BIGER<br />
RIGHT<br />
BOX
</div>
<div style="clear:both;"></div>

</div>
  1. <!-- outer box -->
  2. <div style="width:700px;background-color:#66ff66; color:#ffffff;">
  4. <!-- blue float left holder box -->
  5. <div style="float:left; width:300px; z-index:2; background-color:#0044aa;">
  7. <div>PHP Box for stuff 1</div>
  9. <div>PHP Box for stuff 2</div>
  11. </div>
  12. <!-- black float right box -->
  13. <div style="float:right; position:top right;width:400px; background-color:#000001;">
  14. I<br />
  15. AM<br />
  16. BIGER<br />
  17. RIGHT<br />
  18. BOX
  19. </div>
  20. <div style="clear:both;"></div>
  22. </div>
  • Danny1337
  • Student
  • Student
  • No Avatar
  • Inscription: Mai 14, 2006
  • Messages: 70
  • Loc: Norway
  • Status: Offline

Message Janvier 24th, 2009, 3:02 am

thanks a bunch! Cela fonctionnait flawlessy! <3
  • Danny1337
  • Student
  • Student
  • No Avatar
  • Inscription: Mai 14, 2006
  • Messages: 70
  • Loc: Norway
  • Status: Offline

Message Janvier 30th, 2009, 5:17 pm

Désolé pour doublepost mais j'ai une autre question et de son peu de sens de lancer un nouveau fil.

J'ai besoin d'étirer la case "Nye Anmeldelser" sur le côté droit, au fond de l'emballage. Est-ce possible?
http://animazed.net/

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 6 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 103 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC