Úprava CSS

zdravotnik

Ahojte, ak by mal niekto chvíľu čas a chuť, tak by som bol rád, ak by mi pomohol s úpravou css.
Menu .mainheader by som potreboval presunúť naľavo, nad to umiestniť logo a v pravo by ostal len topcontent.
Budem vďačný aj za pripomienky.
Predstava v prílohe. a CSS s html tiež

Som v práci, tak iba z rýchlika:
skús to robiť cez flexbox, uľahčí ti to život

Spoiler

Kód: Vybrať všetko

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML5/CSS3 Responsive Theme</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body class="body">

    <header class="mainHeader">
        <img src="emweb1.png">

        <nav>
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <div class="container">
    <div class="mainContent">
        <div class="content">
            <article class="topcontent">
                <header>
                    <h2><a href="#" title="first post">First post</a>
                    </h2>
                </header>

                <footer>
                    <p class="post-info">This post is written by Top na webe</p>
                </footer>

                <content>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                    </p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

                </content>


            </article>

            <article class="bottomcontent">
                <header>
                    <h2><a href="#" title="Second post">Second post</a>
                    </h2>
                </header>

                <footer>
                    <p class="post-info">This post is written by Hudy</p>
                </footer>

                <content>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                    </p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

                </content>


            </article>
        </div>
    </div>

    <aside class="top-sidebar">
        <article>
            <h2>Top sidebar</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
        </article>
    </aside>

    <aside class="middle-sidebar">
        <article>
            <h2>Middle sidebar</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
        </article>
    </aside>

    <aside class="bottom-sidebar">
        <article>
            <h2>Bottom sidebar</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
        </article>
    </aside>

    <footer class="mainFooter">
        <p>Copyright &copy;<a href="http://topnawebe.sk" target="_blank" title="hudy"> Top na webe </a> & eMweb</p>
    </footer>
</div>
</body>

</html>

a css:

Kód: Vybrať všetko

body{
	background-image: url('img/bg.png');
	color: #000305;
	font-size: 87,5%;
	font-family: Arial, 'Lucida Sans Unicode';
	line-height: 1,5;
	text-align: left;
    display: flex;
    flex-direction: row; /* dame stranku na polovicu */
}

a{
	text-decoration: none;
}

a:link, a:visited{
	color: #CF5C3F;
}

a:hover, a:active{
	color: white;
	background-color:: 

}
.body{

	clear: both;
}

.mainHeader {
    display: flex;
    flex-direction: column;
}
.mainHeader img{
	width: 40%;
	height: auto;
	margin: 2% 0;
}


.mainHeader nav{
	
	background-color: #666;
	height: 40px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.mainHeader nav ul{
list-style: none;
margin: 0 auto;

}

.mainHeader nav ul li{
	float: left;
	display: inline;
	
}


.mainHeader nav a:link, .mainHeader nav a:visited{
	color: #FFF;
	display: inline-block;
	padding: 10px 25px;
	height: 20px;
	
}

.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited{
	background-color: #CF5C3F;
	text-shadow:none;
}

.mainHeader nav ul li a {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.mainContent {
	line-height: 25px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
    display: flex;
    flex-direction: column;
	
}

.content{
	width: 70%;
	float: left;
    display: flex;
    flex-direction: column;

}

.topcontent{
	background-color: grey;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 3% 5%;
	margin-top: 2%;
}

.bottomcontent{
	background-color: grey;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 3% 5%;
	margin-top: 2%;
}

.top-sidebar {
	width: 21%;
	float: left;
	background-color: grey;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin: 2% 0 2% 3%;
	padding: 2% 3%
}

.post-info{
	font-style: italic;
	color: #fff;
	font-size: 90%;
}

.middle-sidebar {
	width: 21%;
	float: left;
	background-color: grey;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin: 2% 0 2% 3%;
	padding: 2% 3%
}

.bottom-sidebar {
	width: 21%;
	float: left;
	background-color: grey;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin: 2% 0 2% 3%;
	padding: 2% 3%
}

.mainFooter{
	width: 100%;
	height: 40px;
	float: left;
	background-color: #666;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin: 2% 0;

}

.mainFooter p {
	width: 92%;
	margin: 1% auto;
	color: #FFF;
	text-align: center;
}


@media only screen and (min-width: 150px) and (max-width: 600px)
{
	.body{
	
		width: 90%;
		font-size: 95%;		
	}

	.mainHeader img{
	width: 100%;
	
	}
	
	.mainHeader nav{	
	height: 160px;
}

	.mainHeader nav ul{
	padding-left: 0;
	}

	.mainHeader nav ul li{
	width: 100%;
	text-align: center;
	}

	.mainHeader nav a:link, .mainHeader nav a:visited{
		padding: 10px 25px;
		height: 20px;
		display: block;
	}

	.mainContent {
	line-height: 28px;
	
	}

	.content{
		width: 100%;
		float: left;
		margin-top: 2%;

	}

	.post-info {
		display: none;
	}

	.topcontent{
		background-color: grey;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		padding: 3% 5%;
		margin-top: 2%;
	}

	.bottomcontent{
		background-color: grey;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		padding: 3% 5%;
		margin-top: 2%;
	}
	
	.top-sidebar, .middle-sidebar, .bottom-sidebar  {
	width: 94%;
	margin: 2% 0 2% 0;
	padding: 2% 3%
}

}

resp. jsfidle: https://jsfiddle.net/cpkq13qg/

nie celkom som pochopil čo vlastne potrebuješ kam zarovnať

(teraz máš celé body rozdelené akoby na dve polovice: v ľavej je menu, v pravej je zvyšok obsahu, ktorý je radený pod seba)

Flexbox ti uľahčí život aj v responzivite... https://css-tricks.com/snippets/css/a-guide-to-flexbox/

//autoeditácia príspevku (09 Mar 2017, 11:57)
...ešte drobné upresnenie - do html bolo treba pridať jedno div.container (class je tam preto, aby sa dal ľahko rozoznať a dodatočne upraviť)

zdravotnik

Ďakujem za pomoc

Ešte by som potreboval radu, ako si poradiť s týmto, aby som nemal hore biely odskok - 1 Content area na úrovni Header. Ďakujem

Spoiler

body {
font-family: 'Open Sans', sans-serif;
color: #666;

}

/* struktura*/

#pagewrap {

width: 70%;
margin: 0 auto;

}
header {
width: 25%;
float: left;

}
#content {
width: 70%;
float: right;
clear: both;
}

#sidebar {
width: 25%;
float: left;
clear: left;
}
footer {
clear: both;

}

Možnosti máš viac. Ci uz flexbox alebo tým div (header a content) nastavis display: inline-block a nejaku rozumnú width

Úprava CSS

Úprava CSS

Re: Úprava CSS

Re: Úprava CSS

Re: Úprava CSS