Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Recomandare aparat de vidat alime...

Izolatie exterioara casa parter P...

Cuvinte si expresii neclare

Mod de lucru Purmo Tempco Digital...
 Samsung S90C vs LG C3

Problema sunet RCS

Amortizor sertare bucatarie

Codrea Pallady
 Blocurile goale! Orase in car...

Motorul pe benzina 1.0 SCe65

Mostenire In 1986

Lentile sferica pentru astigmatism
 Problema inlocuire usa spate A6 C...

Ce gen de muzica este?

Drepturile copiilor, in numele &#...

Mocheta peste parchet cu incalzir...
 

Pagina Web Auto-Center

- - - - -
Last Updated: Mar 20 2013 22:19, Started by adrianhbk , Mar 20 2013 12:04  
  ·  
  • Please log in to reply
7 replies to this topic

#1
adrianhbk
Posted 20 March 2013 - 12:04

adrianhbk

    Junior Member

  • Grup: Members
  • Posts: 46
  • Înscris: 25.09.2012
Salutare ! Am o problema.In momentul de fata creez o pagina web si nu reusesc sa centrez pagina web atunci cand este accesata.Am cautat pe net si am gasit cateva solutii pentru ca pagina web sa se auto-centreze infunctie de monitor , dar cand aplic ele se autocentreza dar nu isi mai pastreaza pozitiile care le-am declarat fiecarui element in parte , gen left:300px; . Cum fac ca atunci cand pagina web se auto-centreaza si fiecare element centrat sa pastreze pozitia initiala de 300 px de margine care am declarat-o ?

HTML CODE - Inceputul doar

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="Content-Type" content="text/html; utf-8">
	<meta http-equiv="Content-Language" content="ro">
	<meta name="description" content="blablablablabla" />
	<meta name="keywords" content="blablablablabla" />
	<meta name="abstract" content="blablablablabla">
   
<title>blablablablabla</title>
<script type="text/javascript" src="javascript/jquery-1.9.1.js"></script>
<script type="text/javascript" src="javascript/jquery-1.6.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
<script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="javascript/mouse-over.js"></script>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/fonts.css" rel="stylesheet" type="text/css" />
<link href="css/sigle.css" rel="stylesheet" type="text/css" />

</head>

<body class="wrapper">
<!--Header-->
<div id="container">
<div id="mainContent">

<div id="cine-suntem"><span class="orange">CINE</span><br /><center>SUNTEM</center></div>
<div id="ce-facem"><span class="orange">CE</span><br /><center>FACEM</center></div>
<div id="telefon"><a class='popup' href='#'><img src="img/telefon.png"><span>blablablablabla</span></a></div>


<!--End of Header-->

CSS - doar inceputul 

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;

}
.wrapper #container {
width: 1024px;
margin: 0 auto;
text-align: left;
}
.wrapper #mainContent {
padding: 0 20px;
}

#cine-suntem {
font-family: "Proxima Nova Lt";
font-size: 15px;
position: absolute;
left: 300px;
top: 115px;
}

#ce-facem {
font-family:"Proxima Nova Lt";
font-size:15px;
position:absolute;
left:450px;
top:115px;
}

#telefon {
position:absolute;
		width:44px;
height:43px;
left:1000px;
top:115px;
}

#2
bibi
Posted 20 March 2013 - 12:52

bibi

    Active Member

  • Grup: Members
  • Posts: 1,183
  • Înscris: 05.02.2003
Ai incercat sa pui tot in <center>.................</center> ?

#3
onlyone
Posted 20 March 2013 - 15:03

onlyone

    - - - GAME MASTER - - -

  • Grup: Senior Members
  • Posts: 12,845
  • Înscris: 08.10.2005
#container {
width: 1024px;
margin: 0 auto;
text-align: left;
position:relative;
}

scoate .wrapper din fata container - ului

Edited by onlyone, 20 March 2013 - 15:06.

#4
adrianhbk
Posted 20 March 2013 - 15:18

adrianhbk

    Junior Member

  • Grup: Members
  • Posts: 46
  • Înscris: 25.09.2012

View Postonlyone, on 20 martie 2013 - 15:03, said:

#container {
width: 1024px;
margin: 0 auto;
text-align: left;
position:relative;
}

scoate .wrapper din fata container - ului


multumesc frumos ! Functioneaza asa !

#5
Dorin_78
Posted 20 March 2013 - 15:21

Dorin_78

    Member

  • Grup: Members
  • Posts: 323
  • Înscris: 09.02.2013
margin: 0 auto; centrează elementele

pune ăsta la body

si incearca sa folosesti cat mai putin pozitionarea absolută

Edited by Dorin_78, 20 March 2013 - 15:21.

#6
poadol
Posted 20 March 2013 - 15:36

poadol

    Guru Member

  • Grup: Senior Members
  • Posts: 14,104
  • Înscris: 13.12.2010
Cod HTML:
<!DOCTYPE html>
<html>
<head>
	 <meta charset="utf-8" />
	 <meta http-equiv="Content-Type" content="text/html; utf-8">

<title>blablablablabla</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/fonts.css" rel="stylesheet" type="text/css" />
<link href="css/sigle.css" rel="stylesheet" type="text/css" />

</head>

<body class="wrapper">
<!--Header-->
<div id="container">
<div id="mainContent">

<div id="cine-suntem"><span class="orange" title="Proxima Nova Lt">CINE<br />SUNTEM</span></div>
<div id="ce-facem"><span class="orange" title="Proxima Nova Lt">CE<br />FACEM</span></div>
<div id="telefon"><a class='popup' href='#'><img src="img/telefon.png"><span>blablablablabla</span></a></div>
</div>
</div>
</body>
</html>
Cod CSS:
body {
background:#ffffdd;
margin: 0;
padding: 0;
}
.wrapper #container {
width: 1024px;
height:100px;
margin: 0 auto;
border:1px solid black;
}
.wrapper #mainContent {
width: 924px;
height:80px;
margin: 9px 49px;
border:1px solid black;
font-family: Verdana, Arial, Helvetica;
}

#cine-suntem {
font-size: 15px;
position: absolute;
margin-left: 200px;
margin-top: 25px;
border:1px solid black;
padding-left:10px;
text-align: left;
}

#ce-facem {
font-size:15px;
position: absolute;
margin-left:350px;
margin-top:25px;
border:1px solid black;
padding-left:10px;
text-align: left;
}

#telefon {
position: absolute;
width:44px;
height:43px;
margin-left:550px;
margin-top:25px;
}

.orange {
text-align:center;
padding: 10px 20px;
}
Am scos
/*
din body
font: 100% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
din #cine-suntem
font-family: "Proxima Nova Lt";
din #ce-facem
font-family:"Proxima Nova Lt";
*/

Sau cum aveai inainte:
Cod HTML:
<!DOCTYPE html>
<html>
<head>
	 <meta charset="utf-8" />
	 <meta http-equiv="Content-Type" content="text/html; utf-8">


<title>blablablablabla</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/fonts.css" rel="stylesheet" type="text/css" />
<link href="css/sigle.css" rel="stylesheet" type="text/css" />

</head>

<body class="wrapper">
<!--Header-->
<div id="container">
<div id="mainContent">
</div>
</div>
<div id="cine-suntem"><span class="orange" title="Proxima Nova Lt">CINE<br />SUNTEM</span></div>
<div id="ce-facem"><span class="orange" title="Proxima Nova Lt">CE<br />FACEM</span></div>
<div id="telefon"><a class='popup' href='#'><img src="img/telefon.png" alt="telefon.png"><span>blablablablabla</span></a></div>

</body>
</html>
Cod CSS:
body {
background:#ffffdd;
margin: 0;
padding: 0;
}
.wrapper #container {
width: 1024px;
height:100px;
margin: 0 auto;
border:1px solid black;
}
.wrapper #mainContent {
width: 924px;
height:80px;
margin: 9px 49px;
border:1px solid black;
font-family: Verdana, Arial, Helvetica;
}

#cine-suntem {
font-size: 15px;
position: absolute;
margin-left: 400px;
margin-top: 25px;
border:1px solid black;
padding-left:10px;
text-align: left;
}

#ce-facem {
font-size:15px;
position: absolute;
margin-left:550px;
margin-top:25px;
border:1px solid black;
padding-left:10px;
text-align: left;
}

#telefon {
position: absolute;
width:44px;
height:43px;
margin-left:750px;
margin-top:25px;
}

.orange {
text-align:center;
padding: 10px 20px;
}
/*
body
font: 100% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
#cine-suntem
font-family: "Proxima Nova Lt";
#ce-facem
font-family:"Proxima Nova Lt";
*/

In HTML am mai scos din ele dar le adaugi tu pe cele care lipsesc gen:

<?xml version="1.0" encoding="UTF-8" ?>

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<meta http-equiv="Content-Language" content="ro">
<meta name="description" content="blablablablabla" />
<meta name="keywords" content="blablablablabla" />
<meta name="abstract" content="blablablablabla">


<script type="text/javascript" src="javascript/jquery-1.9.1.js"></script>
<script type="text/javascript" src="javascript/jquery-1.6.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
<script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="javascript/mouse-over.js"></script>
sa nu uiti sa stergi </body> si </html> de la finalul codului HTML scris pe forum, cand il introduci langa restul codului tau.

In CSS am adaugat in 4 locuri: border:1px solid black; doar ca sa realizezi ce si cum, cand nu mai ai nevoie de ele le stergi, in rest sper sa te descurci. Posted Image

Edited by poadol, 20 March 2013 - 15:58.

#7
adrianhbk
Posted 20 March 2013 - 17:07

adrianhbk

    Junior Member

  • Grup: Members
  • Posts: 46
  • Înscris: 25.09.2012

View Postpoadol, on 20 martie 2013 - 15:36, said:

Cod HTML:
<!DOCTYPE html>
<html>
<head>
	 <meta charset="utf-8" />
	 <meta http-equiv="Content-Type" content="text/html; utf-8">

<title>blablablablabla</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/fonts.css" rel="stylesheet" type="text/css" />
<link href="css/sigle.css" rel="stylesheet" type="text/css" />

</head>

<body class="wrapper">
<!--Header-->
<div id="container">
<div id="mainContent">

<div id="cine-suntem"><span class="orange" title="Proxima Nova Lt">CINE<br />SUNTEM</span></div>
<div id="ce-facem"><span class="orange" title="Proxima Nova Lt">CE<br />FACEM</span></div>
<div id="telefon"><a class='popup' href='#'><img src="img/telefon.png"><span>blablablablabla</span></a></div>
</div>
</div>
</body>
</html>
Cod CSS:
body {
background:#ffffdd;
margin: 0;
padding: 0;
}
.wrapper #container {
width: 1024px;
height:100px;
margin: 0 auto;
border:1px solid black;
}
.wrapper #mainContent {
width: 924px;
height:80px;
margin: 9px 49px;
border:1px solid black;
font-family: Verdana, Arial, Helvetica;
}

#cine-suntem {
font-size: 15px;
position: absolute;
margin-left: 200px;
margin-top: 25px;
border:1px solid black;
padding-left:10px;
text-align: left;
}

#ce-facem {
font-size:15px;
position: absolute;
margin-left:350px;
margin-top:25px;
border:1px solid black;
padding-left:10px;
text-align: left;
}

#telefon {
position: absolute;
width:44px;
height:43px;
margin-left:550px;
margin-top:25px;
}

.orange {
text-align:center;
padding: 10px 20px;
}
Am scos
/*
din body
font: 100% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
din #cine-suntem
font-family: "Proxima Nova Lt";
din #ce-facem
font-family:"Proxima Nova Lt";
*/

Sau cum aveai inainte:
Cod HTML:
<!DOCTYPE html>
<html>
<head>
	 <meta charset="utf-8" />
	 <meta http-equiv="Content-Type" content="text/html; utf-8">


<title>blablablablabla</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/fonts.css" rel="stylesheet" type="text/css" />
<link href="css/sigle.css" rel="stylesheet" type="text/css" />

</head>

<body class="wrapper">
<!--Header-->
<div id="container">
<div id="mainContent">
</div>
</div>
<div id="cine-suntem"><span class="orange" title="Proxima Nova Lt">CINE<br />SUNTEM</span></div>
<div id="ce-facem"><span class="orange" title="Proxima Nova Lt">CE<br />FACEM</span></div>
<div id="telefon"><a class='popup' href='#'><img src="img/telefon.png" alt="telefon.png"><span>blablablablabla</span></a></div>

</body>
</html>
Cod CSS:
body {
background:#ffffdd;
margin: 0;
padding: 0;
}
.wrapper #container {
width: 1024px;
height:100px;
margin: 0 auto;
border:1px solid black;
}
.wrapper #mainContent {
width: 924px;
height:80px;
margin: 9px 49px;
border:1px solid black;
font-family: Verdana, Arial, Helvetica;
}

#cine-suntem {
font-size: 15px;
position: absolute;
margin-left: 400px;
margin-top: 25px;
border:1px solid black;
padding-left:10px;
text-align: left;
}

#ce-facem {
font-size:15px;
position: absolute;
margin-left:550px;
margin-top:25px;
border:1px solid black;
padding-left:10px;
text-align: left;
}

#telefon {
position: absolute;
width:44px;
height:43px;
margin-left:750px;
margin-top:25px;
}

.orange {
text-align:center;
padding: 10px 20px;
}
/*
body
font: 100% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
#cine-suntem
font-family: "Proxima Nova Lt";
#ce-facem
font-family:"Proxima Nova Lt";
*/

In HTML am mai scos din ele dar le adaugi tu pe cele care lipsesc gen:

<?xml version="1.0" encoding="UTF-8" ?>

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<meta http-equiv="Content-Language" content="ro">
<meta name="description" content="blablablablabla" />
<meta name="keywords" content="blablablablabla" />
<meta name="abstract" content="blablablablabla">


<script type="text/javascript" src="javascript/jquery-1.9.1.js"></script>
<script type="text/javascript" src="javascript/jquery-1.6.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
<script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="javascript/mouse-over.js"></script>
sa nu uiti sa stergi </body> si </html> de la finalul codului HTML scris pe forum, cand il introduci langa restul codului tau.

In CSS am adaugat in 4 locuri: border:1px solid black; doar ca sa realizezi ce si cum, cand nu mai ai nevoie de ele le stergi, in rest sper sa te descurci. Posted Image


Multumesc !

#8
poadol
Posted 20 March 2013 - 22:19

poadol

    Guru Member

  • Grup: Senior Members
  • Posts: 14,104
  • Înscris: 13.12.2010
Cu placere.

Anunturi

Bun venit pe Forumul Softpedia!
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