• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Jak zrobić pionową linię?

Object Storage Arubacloud
0 głosów
797 wizyt
pytanie zadane 27 sierpnia 2020 w HTML i CSS przez techno16 Gaduła (4,780 p.)
zamknięte 28 sierpnia 2020 przez techno16

Jak zrobić pionową linię w HTML/CSS? Ma się ona znaleźć pomiędzy tabelą a tekstem po lewej stronie. Zrobiłem takiego jednostronowca, ale nie mam pojęcia gdzie umieścić to w kodzie. Border też nie działa, bo tworzy się w zupełnie innym miejscu (chyba coś źle robię).

 

html:

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>
<header>
<p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed molestie metus, vitae fringilla elit. Phasellus vel neque sed ipsum mollis hendrerit vel non ex. Fusce a ante scelerisque, tempus dolor non, porttitor velit. </p>
</header>
<hr id="hr1">
<table border="5px" align="right" class="table">
	<tr>
		<td>
			<img src="piorun.png" width="300px" height="300px">
		</td>
		<td>
			<img src="piorun.png" width="300px" height="300px">
		</td>
			<td>
			<img src="piorun.png" width="300px" height="300px">
		</td>
		<tr>
			<td>
			<img src="piorun.png" width="300px" height="300px">
		</td>
		<td>
			<img src="piorun.png" width="300px" height="300px">
		</td>
		<td>
			<img src="piorun.png" width="300px" height="300px">
		</td>
	</tr>
	</tr>
</table>

<div class="div">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in ante sit amet mi varius finibus. Donec ornare pulvinar ipsum aliquam sodales. Phasellus ac aliquam sem. Suspendisse pharetra, magna vitae finibus interdum, tortor libero varius purus, sit amet sollicitudin sem risus vitae lorem. Curabitur enim purus, suscipit nec ultricies a, ultricies a nibh. Nam semper euismod fringilla. Fusce fringilla imperdiet nisi ac tempor. Donec magna risus, imperdiet ut est quis, placerat efficitur magna. Aliquam tempus arcu eu ultrices sagittis. Vivamus lorem mi, sagittis at odio ullamcorper, dictum malesuada arcu. Aliquam faucibus euismod turpis eu ultrices.

Donec ultrices elit mi, eu porta ipsum mollis in. Etiam varius finibus dolor quis accumsan. Nam at faucibus tellus, et dictum dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Praesent imperdiet erat vel fringilla dapibus. Aliquam fringilla nunc nisi, non hendrerit sem pretium ut. Ut tempus at orci et posuere. Curabitur eu tellus et nunc imperdiet dignissim vitae dictum lorem. Proin condimentum lacinia dui vitae dapibus.

Proin vel dapibus odio. Nulla condimentum sem sit amet erat dictum, a facilisis augue ultrices. Vestibulum convallis tristique lobortis. Nullam molestie luctus diam ac finibus. Proin vitae odio eros. Etiam vel iaculis mi, ac elementum nibh. Integer lacinia augue quis magna convallis efficitur.</div>

	</html>

css: 

html {
	background-color: lightblue;
}
header {
 text-align:center;
 text-shadow: 3px -3px 6px;
 border:5px;
 display:block;
 padding: 5px 15px 0px 15px;

 }

 .lorem
 {
 	font-size: 20px;
 }

 #hr1
  {
 	border:solid;
 	padding:0px;
 	margin:0px;
 }
.table 
{
	margin:30px;
}
.div 
{
	font-size:20px;
 	margin: 3px 5px 0px 5px;
	text-align:justify;
}

EDIT:  lepsze zdjęcie 

komentarz zamknięcia: problem rozwiązany
komentarz 28 sierpnia 2020 przez Official gildin Bywalec (2,820 p.)

EDIT:  lepsze zdjęcie 

Chyba screenshot smiley 

3 odpowiedzi

+1 głos
odpowiedź 27 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 28 sierpnia 2020 przez techno16
 
Najlepsza

Wg mnie użycie float na tabeli (przez domyślne style przeglądarki) utrudnia modyfikacje layoutu - ale jeśli chcesz mieć opływający tekst, to ja nie znam innego sposobu.

Dwa rozwiązania, które możesz tu zastosować bez modyfikacji innych styli:

  • dodać tabeli ::before i za jego pomocą narysować kreskę po lewej stronie tabeli
  • zawinąć tabelę w <div> i jemu dać lewy border

Oba sposoby zawarłem tutaj: https://codepen.io/ScriptyChris/pen/jOqmvmv?editable=true%3Dhttps%3A%2F%2Fforum.pasja-informatyki.pl%2F

komentarz 28 sierpnia 2020 przez techno16 Gaduła (4,780 p.)

Właśnie o to mi chodziło. Dziękiyes

 

0 głosów
odpowiedź 27 sierpnia 2020 przez CubeStorm Pasjonat (15,020 p.)

Możesz to zrobić poprzez nadanie właściwości border-right na tekst (albo border-left na tabelkę), lub pomiędzy tymi elementami stworzyć diva nadając mu odpowiednią wysokość, szerokość oraz kolor.

komentarz 27 sierpnia 2020 przez techno16 Gaduła (4,780 p.)
Border nie działa. Tworzy się wokół całej strony, a nie fragmentu

Gdy próbowałem stworzyć diva to tworzył się on pod tekstem; poza tym szkoda tracić czas na wyrównywanie go.
0 głosów
odpowiedź 28 sierpnia 2020 przez VBService Ekspert (254,570 p.)
edycja 28 sierpnia 2020 przez VBService

A może by tak grid-a użyć?

https://codepen.io/vbservice/pen/oNxWPmZ

<div class="tapcc-grid-container">
  <div class="tapcc-header">
    <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed molestie metus, vitae fringilla elit. Phasellus vel neque sed ipsum mollis hendrerit vel non ex. Fusce a ante scelerisque, tempus dolor non, porttitor velit.
    </p>
  </div>
  <div class="tapcc-description">
    <p>Sed ut perspiciatis unde omnis iste   natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in ante sit amet mi varius finibus. Donec ornare pulvinar ipsum aliquam sodales. Phasellus ac aliquam sem. Suspendisse pharetra, magna vitae finibus interdum, tortor libero varius purus, sit amet sollicitudin sem risus vitae lorem. Curabitur enim purus, suscipit nec ultricies a, ultricies a nibh. Nam semper euismod fringilla. Fusce fringilla imperdiet nisi ac tempor. Donec magna risus, imperdiet ut est quis, placerat efficitur magna. Aliquam tempus arcu eu ultrices sagittis. Vivamus lorem mi, sagittis at odio ullamcorper, dictum malesuada arcu. Aliquam faucibus euismod turpis eu ultrices.
   </p>
   <p>
Donec ultrices elit mi, eu porta ipsum mollis in. Etiam varius finibus dolor quis accumsan. Nam at faucibus tellus, et dictum dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Praesent imperdiet erat vel fringilla dapibus. Aliquam fringilla nunc nisi, non hendrerit sem pretium ut. Ut tempus at orci et posuere. Curabitur eu tellus et nunc imperdiet dignissim vitae dictum lorem. Proin condimentum lacinia dui vitae dapibus.
  </p>
  <p>
Proin vel dapibus odio. Nulla condimentum sem sit amet erat dictum, a facilisis augue ultrices. Vestibulum convallis tristique lobortis. Nullam molestie luctus diam ac finibus. Proin vitae odio eros. Etiam vel iaculis mi, ac elementum nibh. Integer lacinia augue quis magna convallis efficitur.
  </p>
  </div>
  <div class="tapcc-pictures">
    <div class="tapcc-picture-1">
      <img src="http://placekitten.com/220/300">
    </div>
    <div class="tapcc-picture-2">
      <img src="http://placekitten.com/220/300">      
    </div>
    <div class="tapcc-picture-3">
      <img src="http://placekitten.com/220/300">        
    </div>
    <div class="tapcc-picture-4">
      <img src="http://placekitten.com/220/300">
    </div>
    <div class="tapcc-picture-5">
      <img src="http://placekitten.com/220/300">        
    </div>
    <div class="tapcc-picture-6">
      <img src="http://placekitten.com/220/300">      
    </div>
  </div>
</div>
/*
   tapcc- prefix to avoid potential class conflicts ;-)
*/

@viewport {
  width: device-width;
  initial-scale: 1;
}
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: lightblue;
}
.tapcc-grid-container {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  grid-template-rows: 1fr 1.5fr;
  gap: 1px 1px;
  grid-template-areas: "tapcc-header tapcc-header" "tapcc-description tapcc-pictures";
   height: 70vh; 
}
.tapcc-header { 
  grid-area: tapcc-header;
  text-align: center;
  text-shadow: 3px -3px 6px;
  border-bottom: 5px solid black;
  padding: 5px 15px;
}
.tapcc-description { 
  grid-area: tapcc-description;
  padding: 5px 15px;
  border-right: 5px solid red;
}
.tapcc-pictures { 
  grid-area: tapcc-pictures;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas: "tapcc-picture-1 tapcc-picture-2 tapcc-picture-3"
		      "tapcc-picture-4 tapcc-picture-5 tapcc-picture-6";
  padding: 5px 15px;
}
.tapcc-picture-1 { grid-area: tapcc-picture-1; }
.tapcc-picture-2 { grid-area: tapcc-picture-2; }
.tapcc-picture-3 { grid-area: tapcc-picture-3; }
.tapcc-picture-4 { grid-area: tapcc-picture-4; }
.tapcc-picture-5 { grid-area: tapcc-picture-5; }
.tapcc-picture-6 { grid-area: tapcc-picture-6; }
.tapcc-pictures img {
  width: 220px;
  height: 300px;  
  border: 2px solid gray;
}
.lorem {
    font-size: 20px;
}

Podobne pytania

0 głosów
1 odpowiedź 159 wizyt
0 głosów
2 odpowiedzi 528 wizyt
pytanie zadane 31 sierpnia 2015 w HTML i CSS przez Jakub Wróbel Użytkownik (920 p.)
+2 głosów
3 odpowiedzi 524 wizyt
pytanie zadane 25 listopada 2022 w HTML i CSS przez MacieKap Bywalec (2,400 p.)

92,684 zapytań

141,589 odpowiedzi

320,073 komentarzy

62,044 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...