Dzień dobry,
mam pytanie, jak ustawić obrazek, aby był nad menu, a nie po lewej stronie w rogu?
Chodzi o to, że w rozdzielczości Full HD obrazek na stronie, którą tworzymy razem z kumplem jest za bardzo po lewej krawędzi ekranu.
Wydaje mi się, że problemem jest to float:left, ale nie wiem, jak to zmienić, aby logo strony było przesunięte nad menu.
html, body {
height: 100%;
width: 100%;
}
body {
margin: 0px;
padding: 0px;
background: #F8F8F8 url(images/overlay.png) repeat;
font-family: 'Source Sans Pro', sans-serif;
font-size: 12pt;
font-weight: 400;
color: rgba(0,0,0,.8);
}
h1, h2, h3 {
margin: 0;
padding: 0;
text-transform: uppercase;
font-family: 'Varela Round', sans-serif;
font-weight: 300;
color: #2D2D2D;
}
h2 {
padding: 0px 0px 30px 0px;
font-size: 2.50em;
}
p, ol, ul {
margin-top: 0px;
}
p {
line-height: 180%;
}
strong {
}
a {
color: rgba(0,0,0,.8);
}
a:hover {
text-decoration: none;
}
a img {
border: none;
}
/*********************************************************************************/
/* Image Style */
/*********************************************************************************/
.image
{
display: inline;
}
.image img
{
display: inline;
width: 100%;
}
.image-full
{
display: inline;
width: 100%;
margin: 0 0 4em 0;
}
.image-left
{
position: relative;
margin: 0 2em 2em 0;
}
.image-centered
{
display: block;
margin: 0 0 2em 0;
}
.image-centered img
{
margin: 0 auto;
width: auto;
}
hr {
display: none;
}
/** WRAPPER */
#wrapper {
background: #FFF;
margin: 0px 0px;
}
.container {
width: 90%;
margin: 0px auto;
}
.clearfix {
clear: both;
}
/** HEADER */
#header-wrapper
{
background: #bf0707 url(images/wkurwiamnie.png);
background-repeat:no-repeat;
background-size: 185px 200px;
position: top;
}
#header {
position: relative;
overflow: hidden;
height: 200px;
}
#social
{
position: absolute;
top: 4em;
right: 0;
}
/** LOGO */
#logo {
position: absolute;
top: 4em;
left: 30px;
}
#logo h1, #logo p {
margin: 80%;
padding: 0;
}
#logo h1 {
letter-spacing: -1px;
text-transform: lowercase;
font-size: 3.5em;
color: #FFF;
}
#logo p {
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 0.9em;
color: #FFF;
}
#logo p a {
color: #FFF;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #FFF;
}
/** MENU */
#menu {
overflow: hidden;
background: #202020;
}
#menu ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline-block;
}
#menu a {
display: block;
padding: 0px 40px 0px 40px;
line-height: 70px;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-family: 'Varela Round', sans-serif;
font-size: 13px;
color: rgba(255,255,255,0.5);
border: none;
}
#menu a:hover, #menu .current_page_item a {
text-decoration: none;
color: rgba(255,255,255,1);
}
#menu .current_page_item a {
}
#menu .last {
border-right: none;
}
/** PAGE */
#page {
overflow: hidden;
padding: 3em 0em 5em 0em;
}
#page img
{
margin-bottom: 1em;
}
#page .title
{
margin-bottom: 2em;
}
#page .title h2
{
font-size: 1.5em;
font-weight: 400;
color: rgba(0,0,0,0.8);
}
#page .title .byline
{
display: block;
padding-bottom: 2em;
color: rgba(0,0,0,0.7);
}
#page .column1
{
width: 582px;
}
#page .button
{
margin-top: 1em;
}
/** CONTENT */
#content {
float: left;
width: 800px;
padding-right: 50px;
border-right: 1px solid #E6E7DC;
}
#content .post-title
{
margin-bottom: 2em;
}
#content .post-title h2
{
margin: 0;
padding: 0;
}
#content .post
{
margin-bottom: 4em;
padding-bottom: 4em;
border-bottom: 1px solid #E6E7DC;
}
/** SIDEBAR 1 */
#sidebar1 {
float: right;
width: 250px;
margin-right: 50px;
}
#sidebar1 #box1 {
margin-bottom: 4em;
}
#sidebar1 h2,
#sidebar2 h2
{
font-size: 1.5em;
font-weight: 400;
}
/** SIDEBAR 2 */
#sidebar2 {
float: right;
width: 250px;
}
/* Footer */
#footer {
clear: both;
text-align: center;
margin-bottom: 0;
overflow: hidden;
background: #202020;
padding: 5em 0px 10em 0px;
}
#footer p {
text-align: center;
color: rgba(255,255,255,0.3);
}
#footer a {
color: rgba(255,255,255,0.4);
}
/* List style 1 */
ul.style1 {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.style1 li {
padding: 10px 0px 15px 0px;
border-top: 1px solid #E6E7DC;
}
ul.style1 .first {
padding-top: 0px;
border-top: none;
}
/* List style 2 */
ul.style2 {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.style2 li {
padding: 25px 0px 15px 0px;
border-top: 1px solid #E6E7DC;
}
ul.style2 .first {
padding-top: 0px;
border-top: none;
}
ul.style2 h3 {
padding: 0px 0px 10px 0px;
font-size: 1.10em;
}
ul.style2 h3 a {
color: #101010;
}
ul.style2 a {
text-decoration: none;
}
ul.style2 a:hover {
text-decoration: underline;
}
/* List style 3 */
ul.style3 {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.style3 li {
padding: 20px 0px 20px 0px;
border-top: 1px solid #E6E7DC;
}
ul.style3 p {
margin: 0px;
padding: 0px;
}
ul.style3 img {
float: left;
margin-top: 3px;
margin-right: 20px;
}
ul.style3 .posted {
padding: 10px 0px 10px 0px;
font-size: 8pt;
color: #A2A2A2;
}
ul.style3 .first {
padding-top: 0px;
border-top: none;
}
.link-style {
display: inline-block;
margin-top: 20px;
padding: 7px 20px;
background: #0C73D4;
border-radius: 5px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}
/*********************************************************************************/
/* Portfolio */
/*********************************************************************************/
#portfolio-wrapper
{
overflow: hidden;
padding: 5em 0em;
background: rgba(0,0,0,.02);
background-image: url(images/overlay.png);
background-repeat: repeat;
border-top: 1px solid rgba(0,0,0,.05);
}
#portfolio
{
text-align: center;
}
#portfolio .icon
{
display: inline-block;
margin-bottom: 1em;
font-size: 2em;
color: #970A42;
}
#portfolio .box
{
color: rgba(0,0,0,0.5);
}
#portfolio h3
{
display: block;
padding-bottom: 1em;
text-transform: uppercase;
font-size: 1.2em;
font-weight: 400;
color: rgba(0,0,0,0.7);
}
#portfolio .title
{
}
#portfolio .title h2
{
color: rgba(0,0,0,0.8);
}
#portfolio .title .byline
{
display: block;
padding-bottom: 2em;
color: rgba(0,0,0,0.7);
}
.column1,
.column2,
.column3,
.column4
{
width: 282px;
}
.column1,
.column2,
.column3
{
float: left;
margin-right: 24px;
}
.column4
{
float: right;
}
/*********************************************************************************/
/* Heading Titles */
/*********************************************************************************/
.title
{
margin-bottom: 3em;
}
.title h2
{
margin: 0;
padding: 0;
font-size: 2.8em;
color: rgba(255,255,255,0.9);
}
.title .byline
{
padding-top: 0.50em;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 400;
font-size: 1.1em;
color: #6F6F6F;
}
/*********************************************************************************/
/* Button Style */
/*********************************************************************************/
.button
{
display: inline-block;
margin-top: 2em;
padding: 0em 1em;
background: #970A42;
border-radius: 8px;
letter-spacing: 0.10em;
line-height: 3em;
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
font-size: 1em;
color: #FFF;
}
/*********************************************************************************/
/* Social Icon Styles */
/*********************************************************************************/
ul.contact
{
margin: 0;
padding: 2em 0em 0em 0em;
list-style: none;
}
ul.contact li
{
display: inline-block;
padding: 0em 0.10em;
font-size: 1em;
}
ul.contact li span
{
display: none;
margin: 0;
padding: 0;
}
ul.contact li a
{
}
ul.contact li a:before
{
display: inline-block;
background: none;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
color: rgba(255,255,255,1);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by TEMPLATED
http://templated.co
Released for free under the Creative Commons Attribution License
Name : Reciprocal
Description: A two-column, fixed-width design with dark color scheme.
Version : 1.0
Released : 20140119
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900|Varela+Round" rel="stylesheet" />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#aa0000",
"text": "#ffdddd"
},
"button": {
"background": "#ff0000"
}
},
"theme": "edgeless",
"content": {
"message": "Ta strona używa cookies i może przetwarzać dane typu adres e-mail!",
"dismiss": "Akceptuję!",
"link": "Dowiedz się więcej"
}
})});
</script>
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1><a href="images/wkurwiamnie.png"></a></h1>
</div>
<div id="social">
<ul class="contact">
<li><a href="https://fb.me/WkurwiaMnie1" class="icon icon-facebook"></a></li>
<li><a href="https://twitter.com/WkurwiaMnie1" class="icon icon-twitter"></a></li>
<li><a href="http://fetchrss.com/rss/5b4c90788a93f8d42c8b4567987532957.atom" class="icon icon-rss"></a></li>
</ul>
</div>
</div>
<div id="menu" class="container">
<ul>
<li class="current_page_item"><a href="index.php" accesskey="1" title="">Strona Główna</a></li>
<li><a href="wpisy.php" accesskey="1" title="">Wpisy</a></li>
<li><a href="https://discord.gg/dmgqNw8" accesskey="2" title="">Discord</a></li>
<li><a href="http://wkurwia-mnie.chatango.com/" accesskey="3" title="" target="_blank">Czat</a></li>
<li><a href="login.php" accesskey="4" title="">Zaloguj się</a></li>
<li><a href="dodajwpis.php" accesskey="5" title="">Dodaj wpis</a></li>
<li><a href="mailto:wkurwiamnieddnsnet@gmail.com" accesskey="6" title="">Kontakt</a></li>
</ul>
</div>
</div>
<div><script charset="UTF-8" src="http://edodatki.pl/code/kursory?data%5BWidget%5D%5Bcursor%5D=fire" type="text/javascript"></script><a href="" title=""></a></div>
<div class="content">
<div class="subcontent" align="center">
<h1>Z czym to się je?</h1>
<br/><br/>
WkurwiaMnie.ddns.net powstało po to, by każdy ktoś jest wkurwiony mógł się wyżalić.<br/>
Jesteś wkurwiony na cały świat? <br/>
Coś cię wkurwiło?<br/>
WkurwiaMnie.ddns.net to miejsce gdzie możesz to napisać!<br/><br/>
</div>
</div>
</div>
<div id="footer">
<p>© Untitled. All rights reserved. Design by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>. Logo by <a href="link do firmy akive">Akive70</a>.</p>
</div>
</body>
</html>
Dodany kod HTML.
EDIT 2: Dodałem cały kod CSS, bo wcześniej był fragment - dopiero zauważyłem.