Forum Pasja Informatyki - Najnowsze z tagiem wyrównanie

CSS wyrównanie tekstu do górnej granicy sekcji

Mon, 17 Feb 2020 14:51:38 +0000

Witajcie,
Robię stronę internetową dla siebie, i mam problem z wyrównaniem tekstu do górnej granicy sekcji.
Wstawię obrazek i od razu zrozumiecie o co mi chodzi :D
A więc, te tytułu artykułów czyli:
Projekt mechaniczny,
Automatyka,
Budowa maszyn, nie są wyrównane do górnej granicy sekcji przez co powstają nie ładne odstępy jak wydać zresztą.
Generalnie chciałbym aby te tytuły oraz teksty "łączyły się ze sobą w pionie, żeby były to takie jakby trzy bloczki z odstępami miedzy sobą.
Polom tekstowym i obrazkom nadałem odpowiednie wymiary aby granice się licowały.
Poniżej załączam również kod HTML or CSS do tej sekcji:

HTML (wyrywek)

<article id="Toferta">
<img class="ofertaimg" src="projekt mechaniczny.jpg" alt="Projekt Mechaniczny.jpg"/>
<img id="automatyka" class="ofertaimg" src="automatyka.jpg" alt="Automatyka.jpg"/>
<img class="ofertaimg" src="maszyna.png" alt="Maszyna.png"/>

    
<!--
<p class="undertitle1">Projekt Mechaniczny</p>
<p class="undertitle1">Automatyka i Sterowanie</p>
<p class="undertitle1">Budowa i Uruchamianie Maszyn</p>
<p class="text1">Dzięki wykwalifikowanemu personelowi z dziedziny mechaniki i materiałoznawstwa oraz dbaniu o poziom wiedzy z zakresu nowatorskich rozwiązań jesteśmy w stanie zaprojektować dowolną maszynę.</p>
<p class="text1">W dzisiejszych czasach podstawą działania każdej maszyny jest jej serce, czyli napędy oraz sterowanie, dzięki doświadczeniu naszej kadry modernizujemy wymagające tego urządzenia.</p>
<p class="text1">Dzięki połączeniu wysiłku naszych projektantów, automatyków oraz kadry menadżerskiej z roku na rok budujemy i wdrażamy nowoczesne maszyny.</p>
-->
<article id="tytuł" class="insidearticle">
<p class="undertitle1">Projekt Mechaniczny</p>
<p class="undertitle1">Automatyka i Sterowanie</p>
<p id="Budowa" class="undertitle1">Budowa i Uruchamianie Maszyn</p>

</article>

<article id="tekst" class="insidearticle">

<p class="text1">Dzięki wykwalifikowanemu personelowi z dziedziny mechaniki i materiałoznawstwa oraz dbaniu o poziom wiedzy z zakresu nowatorskich rozwiązań jesteśmy w stanie zaprojektować dowolną maszynę.</p>
<p class="text1">W dzisiejszych czasach podstawą działania każdej maszyny jest jej serce, czyli napędy oraz sterowanie, dzięki doświadczeniu naszej kadry modernizujemy wymagające tego urządzenia.</p>
<p class="text1">Dzięki połączeniu wysiłku naszych projektantów, automatyków oraz kadry menadżerskiej z roku na rok budujemy i wdrażamy nowoczesne maszyny.</p>

</article>

</article>

CSS (wyrywek):

#Toferta
{
    
    
   
   
text-decoration: none;
    background-color:white;
    
    text-align: center;
    padding-top:40px;
    

}

#Toferta img{
    display:inline-block;
    margin-left:50px;
    margin-right:50px;
    
}

/*
p.undertitle1{
    width:15%;
    margin-left:70px;
    margin-right:70px;
    padding-top:20px;
    padding-bottom:20px;
    padding-left:30px;
    padding-right:30px;
    text-align:center;
    float:center;
    display:inline-block;
    background-color:#EAECEE;
}

p.text1
{
    width:15%;
    float:center;
    text-align:left;
    display:inline-block;
    margin-left:50px;
    margin-right:50px;
     vertical-align: text-top;
    background-color:#EAECEE;
    padding-top:10px;
    padding-right:60px;
    padding-bottom:40px;
    padding-left:20px;
}
*/

p.undertitle1{
    text-align:left;
    display:inline-block;
    width:300px;
    margin-left:50px;
    margin-right:50px;
    padding: 40 40 0 40;
    background-color:#EAECEE;
    font-size:25px;

    
    
    
}


p.text1{
    
    display:inline-block;
    width:300px;
    height:200px;
    padding: 40 40 40 40;
    background-color:#EAECEE;
    Font-size:20px;
    text-align:left;
    float:top;
    margin-left:50px;
    margin-right:50px;
}

Poniżej wstawiam zdj. jakbym chciał aby to wyglądało:

A poniżej to jest "to samo" tylko, że z kreatora do stron.

Dodatkowo umieszczam ss, na którym podzieliłem stronę na sekcje w paintcie, czarne linie oznaczają granice sekcji, w tym wypadku, od góry:
Duży napis oferta:
osobny article,

Od zdjęć do końca białego backgroundu (napiszę w skrócie):
<article>
img
img
img

<article> ....tytuły.. </article>

<article> ..... teksty.....</article>

</article>

margin-left: auto; margin-right: auto; Dlaczego brak reakcji?

Thu, 06 Sep 2018 17:06:01 +0000

<!DOCTYPE HTML>
<html>
<head>
        <meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
		
		<title> Holistic Approach </title>
		
		<meta name="description" content="Learn deeply about the world around us and within us" />
		<meta name="keywords" content="Psychology, science, philosophy, technology" />
		
		<link href="stylew.css" rel="stylesheet" type="text/css" />
		<link href="https://fonts.googleapis.com/css?family=Open+Sans&amp;subset=latin-ext" rel="stylesheet">

		
</head>

<body>
      <div class="wrapper">
	          <div class="header">
			  
			        <div class="logo">
					       Holistic Approach
					</div>
					
			 </div>
	  </div>

</body>

</html>

body
{
      background-color: #303030;
      color: #ffffff;	  
	  font-family: 'Open Sans', sans-serif;
	  font-size: 20px;
	  margin: 0 !important;
}

.wrapper
{
	width: 100%;
}

.header
{
    width: 100%;
    padding:  40px 0;	
}

.logo
{
	width: 450px;
	font-size: 48px;
	margin-left: auto;
	margin-right: auto;
}

Wyrównywanie zdjęć

Sun, 26 Aug 2018 10:00:20 +0000

Siema postanowiłem stworzyć stronę internetową póki co moja wygląda tak https://scr.hu/g6ZMzp

a chciałbym aby 2 i 3 obrazek miały 50% wysokości obrazka 1, ale nie wiem jak to zrobić.

html:

<!DOCTYPE html>
<html lang=pl>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-witdth,inital-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="icon" type="image/png" href="images/Icon.png" />
    <title>Nostale Wiki</title>
    <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div id="wrapper">
            <header id="siteHeader" class style="width: 104px">
                <a id="logo" title="Nostale" href="Index.html"></a>
                <a id="navbar" title="nawigacja"></a>
            </header>
            <section>
                <img id="img1" src="Images/img1.jpg" alt="Główna strona nostale" />
                <img id="img2" src="Images/img2.jpg" alt="Glacernon">
                <img id="img3" src="Images/img3.jpg" alt="potwory">
                
            </section>
            <footer>
            
            </footer>
        </div>
    </body>
</html>

css:

* {
    padding: 0;
    margin: 0;
    font-family: Roboto;
    box-sizing: border-box
    
}
#siteHeader{
    position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	min-width: 104px;
    color: #12a6ec;
	background-color: #034a96;
	display: block;
	float: left;
	overflow: hidden;
	width: 104px;
}
body {
	margin-left: 104px;
    background-color: grey
    
}
#img1{
    width: 50%;
    float: left
}
#img2{
    width: 25%;
    float: left;
    
}
#img3 {
    width: 25%;
}

Border-right

Fri, 27 Jul 2018 20:52:14 +0000

<div id="menu">
			  <div class="option">STRONA GŁÓWNA</div>
			  <div class="option">O MNIE</div>
			  <div class="option">RECENZJE</div>
			  <div class="option">WSPÓŁPRACA</div>
			  <div style ="clear:both;"</div>
			  </div>

#menu
{
	background-color:#ebebeb;
	margin-top:35px;
	color:#6f6d6f;
	padding:10px;
	border: 1px solid #cfcdcc;
}

.option
{
	float:left;
	min-width:50px;
	height:20px;
	font-size:17px;
	font-family: 'Oswald', sans-serif;
	padding:10px;
	border-right: 1px solid #cfcdcc;
	opacity: 0.8;
}

Witam, jak sprawić by ten prawy border stykał się z ramką a nie był pomiędzy nią?

Brak rekacji na margin-right/left:auto;

Wed, 18 Jul 2018 20:15:41 +0000

Nie działa mi wyśrodkowanie diva. Znalazłem informacje, że div musi mieć określoną wielkość więc określiłem ,ale nadal nie dziła.

HTML:

<body>
	<header>
		<div class="logo_container">
		<div class="logo">
			<div class="logo_img"><img src="img/logo.png"></div>
			<div class="logo_name">Nazwa</div>
			<div style="clear:both;"></div>
		</div>
		</div>
	</header>
</body>

CSS:

body
{
	background-color:#efefef;
	margin:0;
}

.logo_container
{
	margin-top:40px;
	width:100%;
}

.logo
{
	margin-left:auto;
	margin-right:auto;
}

.logo_img img
{
	float:left;
	width:150px;
	height:80px;
}

.logo_name
{
	text-transform:uppercase;
	font-size:30px;
}

Element jako link oraz przesunięcie elementu w sidebarze

Fri, 02 Mar 2018 21:23:08 +0000

Dobry wieczór,

Znalazłem fajny sidebar, tyle że był z prawej strony a ja chcę z lewej, wszystko pozmieniałem, jest elegancko, teraz tylko głowię się nad tym jak przesunąć ten kolorowy kwadrat po najechaniu na którąś opcje, chcę by był pod ikonkami (ikonki na nim) i ikony w centrum. Oraz jak zrobić by własnie ten kwadrat o którym mowa zachowywał się jak link? Chcę by cały element wysuwany był linkiem.(ikona tez)

html;

<!DOCTYPE HTML>
<html lang="pl">
<head> 
     <meta charset="utf-8"/>
	  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	  <meta name="author" content="PROFF"/>
	      <title>PROFF-Code</title>
	  <meta name="description" content="Pasja informatyki, nauka, programowanie, html"/>
	  <meta name="keywords" content= "www,html,pasja,informatyki"/>
	  <link rel="stylesheet" href="main.css">
	  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
	<div id="bg"></div>
<ul id="fs-links">
    <li id="fs-links-steam">
        <i class="fa fa-steam"></i>
        <a href="#link-do-fb"></a>
    </li>
    <li id="fs-links-youtube">
        <i class="fa fa-youtube"></i>
        <a href="#link-do-twittera"></a>
    </li>
    <li id="fs-links-twitch">
        <i class="fa fa-twitch"></i>
        <a href="#link-do-google"></a>
    </li>
</ul>
				<body>

css;

body{ background-color: gray;}

/* Floating Social Links */

#fs-links * {
  box-sizing: border-box; /* Grubość borderów nie będzie dodawana do rozmiaru bloku */
  
}

/* Główny kontentr linków - lista ul */
#fs-links {
    list-style-type: none; /* usunięcie punktora listy */
    margin: 0; /* reset marginesów zewnętrznych */
    padding: 0;  /* reset marginesów wewnętrznych */
    position: fixed;  /* 'przykleja' linki do okna przegladarki - podczas przewijania strony, linki pozostaną w tym samym miejscu */
    left: 0; /* odległość linków od lewej krawędzi okna przeglądarki - pozycjonuje slider po lewej stronie */
    font-size: 0; /* usuwa odstępy pomiędzy elementami listy */
    top: 17%; /* odległość linków od górnej krawędzi okna przeglądarki */
	
	
}

/* Element listy - li */
#fs-links li {
    margin-bottom: 5px; /* zewnętrzny, dolny margines elementu listy - odstępy pomiędzy linkami */
    position: relative; /* nadaje elementowi listy pozycjonowanie relatywne */
    left: -20px; /* Pozycjonuje linki (ich część tekstową) poza widocznym obszarem strony - 
                    * tutaj ustawiamy długość linków, jeżeli zmienimy tę wartość, 
                    * trzeba również zmienić width w #fs-links li a
                    */
    
    /* Płynne wyjechanie linku */
    -webkit-transition: all .5s ease; /* prędkość i rodzaj animacji */
    -o-transition: all .5s ease; /* prędkość i rodzaj animacji */
    transition: all .5s ease; /* prędkość i rodzaj animacji */
	
}

/* Efekt po najechaniu kursorem na link */
#fs-links li:hover {
    left: 0; /* Po najechaniu kursorem wskazany link w całości powinien pokazać się w widocznej części okna przeglądarki - raczej nie należy zmieniać */
	
}

/* Link właściwy */
#fs-links li a {
    
    
    display: inline-block; /* zmienia sposób wyświetlania elementu listy */
    height: 40px; /* wysokość linku */
    line-height: 40px; /* wysokość lini - pozycjonowanie tekstu linku w pionie - powinien być taki sam jak wysokość linku */
    border: solid #114400 1px; /* rodzaj, kolor i grubość obramowania, dla pełnego efektu border w #fs-links li i powinno być takie samo */
    border-left: none; /* usuwa lewą linię obramowania */
    width: 30px; /* Długość linków */
    background: #303030; /* tło pod linkiem */
	
	
}

/* Ikona */
#fs-links li i {
    display: inline-block;
    border: solid #114400 1px; /* Styl obramowania */
    border-right: none; /* Usunięcie obramowania z prawej strony */
    height: 40px; /* Wysokość ikony - najlepiej, aby była równa wysokości linka */
    line-height: 40px; /* Wyrównanie wertykalne - powinno być równe wysokości ikony */
    width: 40px; /* szerokość ikony */
    text-align: center; /* wyrównanie horyzontalne ikony - środkowanie */
    font-size: 18px; /* rozmiar ikony */
    vertical-align: top;
    font-size: 22px; /* rozmiar ikony */
    color: #fff; /* kolor ikony */
    position: relative;
    padding-left: 30px;
    background: #303030; /* Tło ikony */
}

/* Obramowanie ikony */
#fs-links li i:after {
    content: "";
    display: block;
    border: solid #303030 1px;
    position: absolute;
    top: 3px; bottom: 3px; left: 3px; right: 3px; /* dzięki temu obramowanie ikony mieści się idealnie w środku */
    background: #303030; /* tło koła */
    z-index: -1; /* ustawia warstwę z tłem koła poniżej ikony */
	
}

/* Link: steam */
#fs-links-steam:hover i:after {
    background: #44629e;
    border-color: #44629e;
}

/* Link: youtube */
#fs-links-youtube:hover i:after {
    background: #48c8f1;
    border-color: #48c8f1;
}

/* Link: twitch*/
#fs-links-twitch:hover i:after {
    background: #dd4b39;
    border-color: #dd4b39;
}

Wyrównanie tekstu w konsoli

Tue, 21 Nov 2017 21:05:40 +0000

Cześć. Zacząłem się uczyć C++ i chciałem zobaczyć jak działa wyrównywanie tekstu.

Tutaj jest kod na którym to sprawdzałem:

string a = "niespodzianka";

	cout.width(40);
	cout <<internal<< a << endl;
	cout.width(40);
	cout << right << a << endl;
	cout.width(40);
	cout << left << a << endl;

Problem jest taki, że wyrównanie do lewej działa, wyrównanie do prawej też (jak je wyrzucę to nic się nie zmieni bo automatycznie wyrównuje do prawej i wyjdzie to samo, dobrze kombinuje?) ale jest problem z wyśrodkowaniem. Wyrównuje do prawej ale nie wiem czemu. Zmieniałem kolejności i raz mi to zadziałało ale nie pamiętam jak to zrobiłem i czemu tak a nie inaczej. Dlaczego tak się dzieje?

Jestem w tym dość świeży

Sun, 24 Sep 2017 12:06:28 +0000

Witam, dopiero zaczynam swoją przygodę w html. Więc na start: jak przesunąć tabelę w prawo?

Wyśrodkowanie grid system w Bootstrap

Fri, 07 Apr 2017 22:31:02 +0000

Porzebuję sobie zrobić prosty szablon w Bootstrap na potrzeby projektu. Od razu mówię, że nie znam się za bardzo na froncie, tylko piszę głównie back-end, ale sytuacja wymaga ode mnie zrobienia samemu jakichś prostych podstron i wybrałem Bootstrap, bo jest szybko i efektownie. Problem polega na tym, że chcę wyśrodkować responsywnie grid system z moją form dla rejestracji, ale przyznam się szczerzę, że nie wiem jakich komend uzyć w css. Obecnie wygląda to tak: https://zapodaj.net/1b8091521ec4a.png.html Na sztywno ustawiła margines od góry, ale jest to "słabe". A potrzebuję, aby automatycznie ustawiło się na środku.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>My application!</title>

    <meta name="description" content="My first application in Spring MVC">
    <meta name="author" content="Jonki!">

    <link rel="stylesheet" href="<c:url value="/resources/bootstrap/css/bootstrap.min.css" />" />
    <link rel="stylesheet" href="<c:url value="/resources/bootstrap/css/register.css" />" />
    <script src="<c:url value="/resources/bootstrap/js/bootstrap.min.js" />"></script>
    <script src="<c:url value="/resources/bootstrap/js/jquery.min.js" />"></script>
    <script src="<c:url value="/resources/bootstrap/js/scripts.js" />"></script>

</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">

            <jsp:directive.include file="include/navbar.jsp" />

            <div class="row">
                <div class="col-md-12">
                    <c:if test="${param.error}">
                        <div class="alert alert-dismissable alert-danger">

                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                                ×
                            </button>
                            <h4>
                                Error!
                            </h4> <strong>Error!</strong> The username or password is incorrect!
                        </div>
                    </c:if>
                    <div class="row" id="rowWithLoginForm">
                        <div class="col-md-4">
                        </div>
                        <div class="col-md-4">
                            <form:form action="/register" modelAttribute="registerDTO" method="POST" cssClass="form-horizontal">
                                <div class="form-group">

                                    <label for="inputUsername" class="col-sm-2 control-label">
                                        Username
                                    </label>
                                    <div class="col-sm-10">
                                        <form:input path="username" class="form-control" id="inputUsername" placeholder="Username" maxlength="36" />
                                    </div>
                                </div>
                                <div class="form-group">

                                    <label for="inputEmail" class="col-sm-2 control-label">
                                        Email
                                    </label>
                                    <div class="col-sm-10">
                                        <form:input path="email" type="email" class="form-control" id="inputEmail" placeholder="E-mail" maxlength="36" />
                                    </div>
                                </div>
                                <div class="form-group">

                                    <label for="inputPassword" class="col-sm-2 control-label">
                                        Password
                                    </label>
                                    <div class="col-sm-10">
                                        <form:input path="password" type="password" class="form-control" id="inputPassword" placeholder="Password" maxlength="36" />
                                    </div>
                                </div>
                                <div class="form-group">

                                    <label for="inputReenterPassword" class="col-sm-2 control-label" id="labelReenterPassword">
                                        Reenter password
                                    </label>
                                    <div class="col-sm-10">
                                        <form:input path="reenterPassword" type="password" class="form-control" id="inputReenterPassword" placeholder="Re-enter password" maxlength="36" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">

                                        <button type="submit" class="btn btn-success btn-lg" id="btnCreateNewAccount">
                                            Create new account
                                        </button>
                                        <button formaction="/login" type="submit" class="btn btn-primary btn-md" id="btnSignIn">
                                            Sign in
                                        </button>
                                    </div>
                                </div>
                            </form:form>
                        </div>
                        <div class="col-md-4">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

I CSS

#inputUsername {
    margin-left: 20px;
}
#inputEmail {
     margin-left: 20px;
}
#inputPassword {
    margin-left: 20px;
}
#inputReenterPassword {
    margin-left: 20px;
}
#labelReenterPassword {
    margin-top: -10px;
}
#btnCreateNewAccount {
    margin-left: 20px;
}
#btnSignIn {
    margin-left: 20px;
}
#rowWithLoginForm {
    margin-top: 250px;
}

Bootstrap wyśrodkowanie w pionie elementów w tabeli

Sun, 26 Mar 2017 14:02:28 +0000

Cześć, obecnie w bootstrap mam tabelę która wyświetla różne rzeczy, między innymi zdjęcie które rozciąga cały rząd w dół a komórki gdzie jest tekst pozostają u góry.

Efekt chcę uzyskać taki że, tekst w pozostałych komórka będzie wyśrodkowany w pionie czyli w połowie wysokości zdjęcia w kolumnie 2,

Kodu tabeli nie daję bo to jest zwykła tabela bootstrap skopiowana z w3school

Wyrównanie tekstu w formularzu

Mon, 23 Jan 2017 22:05:41 +0000

Witam otóż w jaki inny sposób można wyrównać równo pod sobą tekst z "input blokami" tak żeby to wyglądało estetycznie prócz tabel.

HTML

<!DOCTYPE html>
<html lang="pl">
<head>
	<title>ADD USER</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="container">
<div id="add_user">

<form>
	<h2>DODAWANIE UŻYTKOWNIKA</h2>

	Nazwa Użytkownika: <input type="text" name="uid">
	Hasło: <input type="password" name="pwd">
	<div class="clear"></div>

	Imię: <input type="text" name="first">
	Nazwisko: <input type="password" name="last">
	<div class="clear"></div>

	E-mail: <input type="text" name="mail">
	PESEL: <input type="date" name="PESEL">
	<div class="clear"></div>

	<button>DODAJ UŻYTKOWNIKA</button> <button>ZRESETUJ</button>
</form>

</div>
</div>


</body>
</html>

CSS

* {
	margin: 0;
	padding: 0;
	font-family: Arial;
	color: white;
}

.clear {
	clear: both;
}

#container {
	width: 960px;
}

#add_user {
	outline-width: 
	padding: 10px;
	border: 1px black solid;
	background-color: #222222;
}

#add_user > h2 {
	text-align: center;
}

#add_user > form >  button {
	color: black;
}

#add_user > form > input {
	width: 200px;
}

Wyrównanie elementów względem sąsiadujących

Wed, 11 Jan 2017 20:17:35 +0000

Witam potrzebuję pomocy/porady jak w miarę sensownie wyrównać te elementy względem siebie. Strona http://ckpl.pl/ dokładnie chodzi o aktualności. Chcę na pewno aby przyciski były na równej wysokości względem siebie nie ważne ile tekstu jest w opisie. Tak samo tytuły na takiej samej wysokości niezależnie od wielkości zdjęcia :) Z góry dziękuję za pomoc :)

wyśrodkowanie poziomego menu w pionie

Tue, 15 Nov 2016 10:28:47 +0000

chciałbym wyśrodkować poziome menu w pionie danego elementu:

CSS:

*
{
    margin:0;
    padding:0;
    font-family: 'Titillium Web', sans-serif;
}
header
{
    width: 100%;
    height: 590px;
    background-color: #87509c;
}

.nav
{
    padding: 60px;
    background-color: aquamarine;
}

.nav ul
{
    list-style-type: none;
    float: right;
}
.nav ul li
{
    float:left;
    margin-left: 10px;
}
.nav ul li:first-child
{
    margin-left: 0px;
}
.nav ul li a
{
    text-decoration: none;
    color: white;
    display: block;
    padding: 5px 10px;
    border-radius: 5px;
}
.nav ul li a:hover
{
 background-color: #643a79;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
</head>
<body>
    <header>
        <div class="nav">
            <ul>
                <li><a href="">HOME</a></li>
                <li><a href="">ABOUT</a></li>
                <li><a href="">WORK</a></li>
                <li><a href="">BLOG</a></li>
                <li><a href="">CONTACT</a></li>
            </ul>
        </div>
    </header>
</body>
</html>

Dodam że po lewej stronie chciałbym dodać Logo które będzie większe niż menu

wyśrodkowanie tekstu w pionie

Fri, 07 Oct 2016 22:16:17 +0000

<div class="tile_footer" 
style="background:blue; width:100%; height: 36%; position:absolute; top:64%; left:0; right:0; bottom: 0;">

<div style="position:absolute; width:100%; color: white; text-align: center; z-index: 999; font-size: 4vw;">
MILION
</div>

</div>

Mam taki kod wszystko jest ok tylko jak mogę wyśrodkować w pionie napis MILION?

Wyrównanie tekstu w pionie

Wed, 03 Aug 2016 14:00:36 +0000

Witam, robię sobie pewne portfolio i już na samym początku mam problem - nie mogę wyrównać tekstu w pionie. Jakieś pomysły jak to wyrównać? probowałem przez line-height ale nie zbyt to mi wychodzi.

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta name="keywords" content="Portfolio">
	<meta name="author" content="Jan Kowalski">
	<meta http-equiv="refresh" content="30">
	<meta name="description" content="My portfolio">
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<link href='https://fonts.googleapis.com/css?family=Raleway:300,200,400&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	<title>Jan Kowalski | Portfolio</title>
</head>


<body>

	<div id="container">
		<div id="content">
			<h1>My name is Jan Kowalski </br> I like volleyball &amp; swimming  <h1>
		</div>


	</div>

</body>

</html>

body {
	background-color: #303030;
	margin:0;
	padding:0;
}
#container{
	width:100% !important;
}
h1 {
	color: white;
	font-family: 'Raleway', sans-serif;
	font-weight: 200;
	font-size:40px;
	line-height: 300px;
}


#content {
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
}

Problem z wyrównaniem divów w jednej linii!

Tue, 07 Jun 2016 17:21:08 +0000

Otóż chodzi o to ze divy nie chcą się wyrównać!

Nie da się tak wyjaśnić więc pokaże!

Jest tak:

A chciał bym tak:

Podam też kody

HTML/PHP:

<div class="nav">
			 <div id="Witajuser">
			 <?php 
		 echo "<h1>Witaj ".$_SESSION['user'].'!<h1>'; 
		 ?>
		 </div>
		 <div id="jakiemail">
		 <?php 
		 echo "<h3>E-mail: ".$_SESSION['email']; 
		 ?>
		 </div>
		 <h3 id="wylogujesz"><a  href="logout.php">Wyloguj Się</a><h3> <div id="zegar"></div>
		</div>

CSS:

.nav
{
	color: Yellow;
	background-color: 	#1E90FF !important;
	margin: 0px;
	border: 0px;
	padding: 0px;
	text-align: center;
	width: 100%;
	font-family: AR CENA;
	display:table;
    margin-right: auto;
	margin-left: auto;
	
}
#zegar
{
	float:left;
	display:table;
    margin-right: auto;
	margin-left: auto;
	background-color: blue;
	display: inline-block;
}
#wylogujesz
{
	float:left;
	display:table;
    margin-right: auto;
	margin-left: auto;
	background-color: blue;
	display: inline-block;
}
#Witajuser
{
	float:left;
	display:table;
    margin-right: auto;
	margin-left: auto;
	background-color: blue;
	display: inline-block;
}
#jakiemail
{
	float:left;
	display:table;
    margin-right: auto;
	margin-left: auto;
	background-color: blue;
	display: inline-block;
}

No i jak to uzyskać? (obrazek nr.2)

Pionowe wyśrodkowanie tekstu obok zdjęcia

Wed, 27 Apr 2016 15:36:39 +0000

Cześć!

Mam pytanie jak w tytule tematu. Próbowałem na różne sposoby ustawić tekst, tak aby jego środek był wyrównywany do środka sąsiadującego z nim zdjęcia ale poległem. Z poradników dowiedziałem się, że aby zastosować vertical-align należy nadać divowi wyświetlanie inline lub tabeli i próbowałem nadać display block, później table i jakieś kombinacje i nic z tego.

https://jsfiddle.net/Egoiste/utqrv4so/

mógłby ktoś zerknąć i dać wskazówkę?
ps. jestem bardzo początkujący, to moje pierwsze podrygi.

Wyrównanie tekstu w konsoli

Thu, 17 Mar 2016 20:55:45 +0000

Witam, napisałem program gromadzący w pliku .txt dane o uczniów:
-numer ucznia
-imię
-nazwisko
-srednia ocen

Dane zapisane są w strukturze, funkcja wyświetlająca spełnia swoje zadanie w ten sposób:

Nr ucznia Imie Nazwisko Srednia ocen
1 Marcin Gortat 6
2 Jakub Moch 5
3 Adrian Nowakowski 3 (!!!)

KOD:

cout<<"Nr ucznia    Imie    Nazwisko    Srednia ocen"<<endl;

for (i=0;i<n;i++)
    {
        cout<<"\t"<<a[i].nr_u;
        cout<<"\t"<<a[i].imie;
        cout<<"\t"<<a[i].nazwisko;
        cout<<"\t\t"<<a[i].ocena<<endl;
    }

(!!!) - tutaj pojawia się problem. Imię i nazwisko to tablice char mające 15 znaków. Sęk w tym, że przy zbyt długim nazwisku ocena ucieka o 1 tabulator dalej. Tak więc w jaki sposób mogę zastąpić tabulatory i zrobić wyświetlanie w taki sposób, żeby zrobić sobie "margines bezpieczeństwa" w odległości i sprawić, aby wszystko było wyświetlanie 1 pod drugim bez takich przeskoków przy dłuższych nazwiskach/imionach?

@EDIT: Wszystko powinno być równo 1 pod drugim w przykładzie, tylko tutaj na forum ciężko to zrobić :)