Forum Mjukvara Programmering och digitalt skapande Tråd

Problem med css positionering i chrome

1
Skriv svar
Permalänk
Medlem
●

Problem med css positionering i chrome

Hej,

Jag håller nu på och gör en hemsida i webbdesign A. Jag tyckte allt gick så bra då jag testkört sidan med internet explorer i dreamweaver hela tiden under projektet men nu när jag testar att köra det i Chrome så blir all text jag positionerat med css förskjutet, dock stannar alla bilder jag positionerat med css på rätt plats.

Bild på problemet i Chrome:

Någon som vet hur jag fixar detta? Jag tar även gärna emot konstruktiv kritik om sidan.

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●

Kollat om den ser bra ut i firefox oxå?
Kontrollerat att både html-filen och css-filen är giltig?
Har du i css-filen i början en som raderar alla margins för alla olika taggar och element och definerar själv i efterhand?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av dEnnA:

Kollat om den ser bra ut i firefox oxå?
Kontrollerat att både html-filen och css-filen är giltig?
Har du i css-filen i början en som raderar alla margins för alla olika taggar och element och definerar själv i efterhand?

Gå till inlägget

Det blir likadant i firefox som i chrome, koden ser ut så att jag har gjort en tabel med 1 kolumn och rad och sedan lagt in texten centrerad i tabellen. Därefter lägger jag in tabellen (borders = 0) i en div

<div id="news2text" align="center">
  <table width="800" border="0">
    <tr>
      <td><h3><a href="http://www.arena.net/blog/when-its-ready" rel="bookmark" title="Permanent Link to When It’s Ready">When It’s Ready</a></h3></td>
    </tr>
  </table>
</div>

Och sedan styr jag hur högt upp den ska vara på sidan med

#news2text{
	position: relative;
	top:-1732px;
	z-index:125;
}
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Ganska mycket problem med det där. Varför använder du en tabell till att börja med om den bara har en cell?

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Teknocide:

Ganska mycket problem med det där. Varför använder du en tabell till att börja med om den bara har en cell?

Gå till inlägget

vet inte riktigt varför, helt onödig men det finns ingen vits med att ta bort den så den ligger kvar där

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Gör om gör rätt. Tabeller använder man bara till tabulär data.

Visa signatur

Car pc (bygglogg) | Fishtank server (galleri) | HTPC (galleri)

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av jocke92:

Gör om gör rätt. Tabeller använder man bara till tabulär data.

Gå till inlägget

Jag kan väll ta bort dem då men det blir ändå ingen skillnad då samma problem återstår.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Version av IE?

Varför man nu sitter och kollar i IE när det är den ökänt sämsta webbläsaren på att rendera ordentligt... Men ta bort tabellen åtminstone.

Sen undrar jag varför du kör en sån negativ marginal? Det blir inge bra alls... tror du har byggt helt fel ärligt talat. Vem har lärt dig det här?

Lista hela koden och CSS:en bitte.

Visa signatur

http://facebook.com/descendingchaos
http://johannesohlsson.se
http://qorner.se

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av darkmoon:

Version av IE?

Varför man nu sitter och kollar i IE när det är den ökänt sämsta webbläsaren på att rendera ordentligt... Men ta bort tabellen åtminstone.

Sen undrar jag varför du kör en sån negativ marginal? Det blir inge bra alls... tror du har byggt helt fel ärligt talat. Vem har lärt dig det här?

Lista hela koden och CSS:en bitte.

Gå till inlägget

Jag använder IE 8.
Vår lärare lärde oss att göra en hemsida inuti en tabell vilket jag tyckte var dumt så jag experimenterade lite själv med css tills jag lyckades få sakerna dit jag ville.

Hela index.html:

Citat: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

body {
	background-image: url();
	background-repeat: no-repeat;
	background-color: #000000;
}
#backpic {
	position: relative;
	z-index:-500000;
}
#navbartable {
	position: relative;
	top:-2125px;
	
	z-index:290;
}
#navbar {
	position: relative;
	top:-600px;
	z-index:105;
}
#news2text{
	position: relative;
	top:-1688px;
	z-index:125;
}
#news3text{
	position: relative;
	top:-1248px;
	z-index:125;
}
#navbarhom {
	position: relative;
	top:-2168px;
	z-index:110;
}
#gwlogo {
	position: sylvari;
	top:-1px;
	z-index:-60;
}
#gwlogo {
	position: relative;
	top:-1360px;
	z-index:100;
}
#news1title{
	position: relative;
	top:-2164px;
	z-index:120;
	left: 30px;
}
#body {
	position: relative;
	top:-630px;
	z-index:101;
}
-->
</style>
<link href="body.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body,td,th {
	color: #999999;
	text-align: center;
}
a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
a:hover {
	color: #FFFFFF;
	text-decoration: none;
}
a:active {
	color: #FFFFFF;
	text-decoration: none;
}

-->
</style>
</head>

<body>
<div align="center" id="backpic"><div align="center">
 <img src="Background.jpg" width="1024" height="768" /></div>
</div>


<div id="navbar" align="center"><img src="navbar.png" width="798" height="30" /></div>

<div id="body" align="center">
  <table width="800" height="617" border="0" align="center">
    <tr>
      <td height="611" valign="top" bgcolor="#1D1D1D"><p> </p>
          <p align="center"><img src="navigator.png" width="746" height="49" /></p>
        <p align="center"><img src="News/News1.png" width="746" height="28" /></p>
        <p align="center"><img src="News/zojablog.jpg" width="746" height="200" /></p>
        <p align="center"> Last week we introduced<a href="http://guildwars.com/heartsofthenorth">Hearts of the North</a>, the next phase in the ongoing<em>Guild Wars Beyond</em>series. In this all-new</p>
        <p align="center"> content you’ll reunite the legendary heroes Gwen and Keiran Thackeray and you can look fabulous doing it in one of our</p>
        <p align="center"><a href="https://secure.ncsoft.com/cgi-bin/Store.pl?action=toggleCateg...">elegant new wedding costumes</a>! For this week’s Link Roundup, we’ve collected a lot of the recent conversations and</p>
        <p align="center"> coverage about Hearts of the North, so let’s get to it! </p>
        <p align="center"> </p>
        <p align="center"><img src="News/News1.png" alt="" width="746" height="28" /></p>
        <p align="center"><img src="News/gw2_underwater_blogheader.jpg" width="746" height="200" /></p>
        <p align="center"> Whenever we get asked when<em>Guild Wars 2</em>is going to be released or even when we’re going to release more information,</p>
        <p align="center"> we always give the answer, “When it’s ready.” I realize that ultimately this is an unsatisfying answer, but at the same time it’s</p>
        <p align="center"> the most accurate and honest answer that we can possibly give. So what do we really mean when we say “When it’s ready“? </p>
        <p align="center"> </p>
        <p align="center"><img src="News/News1.png" alt="" width="746" height="28" /></p>
        <p align="center"><img src="News/gw2_spectrum_lefthandofdragon_blogheader.jpg" width="746" height="200" /></p>
        <p align="center"><a href="http://www.amazon.com/Spectrum-17-Best-Contemporary-Fantastic...">Spectrum 17</a>is on bookshelves now! This year’s edition features vivid imagery from ArenaNet artists Kekai Kotaki, Horia</p>
        <p align="center"> Dociu, and an award-winning piece by our Creative Director Daniel Dociu! <a href="http://www.spectrumfantasticart.com/">Spectrum</a>is an annual full-color collection that </p>
        <p align="center">showcases the best fantastic art of the year. This highly anticipated book includes stunning art from books, comic, games, film,</p>
        <p align="center"> and advertising, as selected by Spectrum’s distinguished advisory board. This year Daniel Dociu took home Spectrum’s</p>
        <p align="center"> Gold Award for the brilliant piece of concept art from<em>Guild Wars 2</em>you see in this post. Congratulations to Daniel and all </p>
        <p align="center">of the ArenaNet artist featured in this year’s collection!</p>
        <p align="center"> </p>
        <p align="center"> </p></td>
    </tr>
  </table>
</div>
<div id="navbartable">
  <table width="800" border="0" align="center">
  <tr>
    <td width="133"><a href="index.html">Home</a></td>
    <td width="133"><a href="videos.html">Videos</a></td>
    <td width="133"><a href="conceptart.html">Concept Art</a></td>
    <td width="133"><a href="wallpapers.html">Wallpapers</a></td>
    <td width="133"><a href="contactus.html">Contact Us</a></td>
    <td width="134"><a href="map.html">Map</a></td>
  </tr>
</table>
</div>
<p> </p>
<div id="news3text" align="center">
<h3><a href="http://www.arena.net/blog/daniel-dociu-wins-spectrum-17-gold-..." rel="bookmark" title="Permanent Link to Daniel Dociu Wins Spectrum 17 Gold Award!">Daniel Dociu Wins Spectrum 17 Gold Award!</a></h3>
</div>
<div id="news2text" align="center">
<h3><a href="http://www.arena.net/blog/when-its-ready" rel="bookmark" title="Permanent Link to When It’s Ready">When It’s Ready</a></h3>
</div>
<div id="news1title" align="center">
  <h3><a href="http://www.arena.net/blog/hearts-of-the-north-link-round-up" rel="bookmark" title="Permanent Link to Link Round Up: Hearts of the North"> Link Round Up: Hearts of the North</a></h3>
</div>
</body>
</html>
Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Ta bort alla position:relative samt negativa top-indrag och se hur det blir. Sen använder du marginaler för att skapa utrymme mellan dina element.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av jocke92:

Gör om gör rätt. Tabeller använder man bara till tabulär data.

Gå till inlägget

Säger samma sak som jocke92, tabeller används till tabulär data och inte till layout.

Visa signatur

i5 2500k@stock ** P67A-GD65 ** AMD 6950 ** 1TB F3 ** Lian-Li PC-FI8

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Teknocide:

Ta bort alla position:relative samt negativa top-indrag och se hur det blir. Sen använder du marginaler för att skapa utrymme mellan dina element.

Gå till inlägget

Tar jag bort relative + top så hamnar texterna längst ner på sidan och hur gör jag marginaler?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av spot_1337:

Tar jag bort relative + top så hamnar texterna längst ner på sidan och hur gör jag marginaler?

Gå till inlägget

Det är, no offense, för att du gjort allting fel

Du kan byta ut alla tabeller mot en struktur liknande den här:

<div class="inlagg">

<h1>Rubriktexten</h1>
<p>Texten i inlägget</p>

</div>

Fast om du vill göra det lite mindre bökigt att lägga på en css så prova nåt i stil med:

<div class="inlagg">
<div class="inlaggtitel">
<h1>Titel</h1>
</div>
<div class="inlaggbrodtext">
<p>Text.</p>
<p>Mer text.</p>
<p>Ett tredje stycke.</p>
</div>

Så blir det en smula enklare att styla:

.inlagg
{width: 400px;
float: left;
}

.inlaggtitel
{width: 400px;
Height: 30px;
float: left;
text-align: center;
background-image: url(url/till/din/bakgrundsbild.png);
background-repeat: repeat-x;
}

.inlaggbrodtext
{width: 400px;
float: left;
}

Typ... Är väl ingen idé att gå in på alternativa måttenheter för dig än

EDIT: Du kapar på så vis bort mer än hälften av koden gentemot hur du har gjort hittills. Dreamweaver borde fan vara förbjudet när man ska lära ut webbdesign... Finns ju ingen som har något vett i huvudet som använder det professionellt

Visa signatur

http://facebook.com/descendingchaos
http://johannesohlsson.se
http://qorner.se

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av darkmoon:

mkt text...

Gå till inlägget

Nu vart det bara ännu värre hehe http://i56.tinypic.com/33lmb0w.jpg
Allting som kan hamna på fel ställe gjorde det

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av spot_1337:

Nu vart det bara ännu värre hehe http://i56.tinypic.com/33lmb0w.jpg
Allting som kan hamna på fel ställe gjorde det

Gå till inlägget

Kolla i en riktig webbläsare istället... Och sluta använd dreamweavers designläge!

Visa signatur

Citera eller nämn gärna mig (@ToJa92) om du svarar på något jag skrivit.
Uppskattar du eller blir hjälpt av ett inlägg jag skrivit är jag tacksam om du gillar det.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av ToJa92:

Kolla i en riktig webbläsare istället... Och sluta använd dreamweavers designläge!

Gå till inlägget

Nu vart det lite bättre fast titel texten är förskjuten nedåt lite och allting sitter på fel ställe på sidan, hur ska jag få det dit jag vill ha det utan att använda top: -x; ? http://i55.tinypic.com/zks40m.jpg

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Detta gör du genom att lägga allt innehåll i din "backpic" div. Istället för att ange bakgrunden i en <img>-tag så sätter du den som bakgrundsbild på div:en. Alternativt fular du och anger position:absolute för backpic vilket innebär att den inte längre påverkar positionen av de andra elementen i din layout. Men, som den elake bonden säger, det är feeeeeeel.

align="center" i varje tag är även det mindre önskvärt; du vinner mycket på att flytta allt sånt till CSS-dokumentet istället då det både är onödigt och förlegat att skriva in det i HTML-en.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara