1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Css position:absolute problema

Discussão em 'Web Development' iniciada por mullog, 18 de Março de 2006. (Respostas: 5; Visualizações: 3308)

  1. Tou a aprender a construir páginas usando css, mas estou com o seguinte problema na utilização da propriedade position: absolute(que permite posicionar um elemento-neste caso uma imagem).

    õ código que tenho é:
    CSS:
    img#logo {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 250px; width: 250px;
    border-bottom-style: ridge;
    border-bottom-color: limegreen;
    }

    img#bannertopo {
    position:absolute;
    left: 255px;
    top: 0px;
    border-bottom-style: ridge;
    border-bottom-color: yellow;
    }

    HTML:
    <html>

    <head>
    <title>pagina</title>
    <link rel="stylesheet" type="text/css" href="cssdesign.css" />
    </head>

    <body>
    <img id="logo" src="imagens/logo.png" alt="Logo">
    <img id="bannertopo" src="imagens/bannertopo.bmp" alt="Banner Topo">

    <p>dskhsdfkh</p>
    </body>

    </html>

    O problema é que o elemento p é colocado no ínicio da página, o que me força a definir a posição deste elemento e de todos os que se seguirem, o que me põe dúvidas sobre estar a usar esta propriedade.
    A razão porque a uso é porque quero a imagem encostada mesmo em cima em 0px 0px. Qual é a melhor solução?
     
  2. Ricardo Vidal

    Ricardo Vidal Power Member

    Para definires os layouts correctamente, deverás utilizar div's para marcar as zonas onde queres que apareça tudo. Ou seja, deverá haver um div para o banner de cima, e um div abaixo para onde queres que apareça o texto todo.

    <div id="geral">
    <div id="banner">imagem</div>
    <div id="texto"><p>texto</p></div>
    </div>

    Logicamente que terás que usar o CSS para melhor posicionar isto tudo.
    A tua abordagem não está a ser correcta por isso aconselho-te a rever o teu esquema de layout :)

    Força nisso. Estamos aqui para ajudar.
     
  3. greven

    greven Folding Artist

    Também costumo usar o div para englobar todos os outros div's, tipo container.

    Vai a este site, vai-te ajudar bastante: http://www.alistapart.com/
     
  4. Ok, defini os divs mas depois de definir os div's mesmo assim há uma pequena distância entre as imagens e a borda do browser. Gostava de saber como removê-la?(se é que se o pode fazer em usar position)
     
  5. greven

    greven Folding Artist

    E qual é o Browser? ;)

    Experimenta no iE6, no iE7 (opcional, mas já que vai sair...) e no Firefox, Opera também se quiseres e vê os resultados, diferentes por certo.
     
  6. SoundSurfer

    SoundSurfer Power Member

    vê se o problema é o padding.. define também o padding nos divs: "padding:0px"

    já agora, este plugin no FF dá muito jeito: http://chrispederick.com/work/webdeveloper/
     

Partilhar esta Página