Πρόβλημα με κείμενο σε site με HTML

Asevastos · 11 Δεκεμβρίου 2018

Καλησπέρα, ετοιμάζω μια εργασία για τη σχολή και μαθαίνω HTML/CSS. Προχωράω καλά με το site που πρέπει να φτιάξω, απλώς έχω ένα θέμα. Συγκεκριμένα, θέλω να βρω έναν τρόπο ώστε το text μου να μη μπαίνει πάνω από το αριστερό μενού και να το κατεβάζει πιο κάτω, αλλά να μπαίνει στα δεξιά του και το ένα να λειτουργεί ανεξάρτητα από το άλλο. Βάζω και μια εικόνα για να καταλάβετε πως είναι και πως πρέπει να είναι:

Spoiler

και πως πρέπει:

Spoiler

Κώδικας HTML & CSS:

<!DOCTYPE html>
<html>

	<title>Αρχική σελίδα</title>
	<link rel="stylesheet" type="text/css" href="style.css">

<body>

<div id="first">
	<h1>Αρχική σελίδα</h1>
</div>

<div id="second">
	<div id="description">

		<p> Καλωσήρθατε στον ιστόχωρο για το μάθημα "Εκμάθηση HTML". Η ιστοσελίδα αυτή δημιουργήθηκε με σκοπό να διευκολύνει τους φοιτητές κατά την εκμάθηση της HTML. </p>
		<p> Επιπλέον,

	</div>
	<h4 class="target"><span>Αρχική σελίδα</span></h4>
	<h4 class="target"><span>Ανακοινώσεις</span></h4>
	<h4 class="target"><span>Επικοινωνία</span></h4>
	<h4 class="target"><span>Έγγραφα μαθήματος</span></h4>
	<h4 class="target"><span>Εργασίες</span></h4>
	<div id="line"></div>
	<div id="transparent-line"></div>
</body>
</html>

#first{
	border:3px; 
	border-style:solid; 
	border-color: black; 
	padding: 1em; 
	text-align: center
}

#second{
	border:3px; 
	border-style:solid; 
	border-color: black; 
	padding: 1em; 
	text-align: left
}

.target span{
	background-color: grey;
	color: white;
}

#line{
	border-left: 3px solid black;
 	height: 500px;
 	position: absolute;
	position: absolute;
    left: 15%;
    margin-left: -3px;
    top: 130px;
}

#transparent-line{
	border-left: 3px solid white;
 	height: 250px;
}

#description{
	text-indent: 300px;
	font-size: 18px;
}

genius_13 · 11 Δεκεμβρίου 2018

#description
{
    float: right;
    font-size: 18px;
}

XPHSTOS_ · 11 Δεκεμβρίου 2018

Είναι λάθος ο τρόπος προσέγγισης σου για την δομή της HTML.
Αν δομήσεις σωστά την HTML θα μπορέσεις πιο εύκολα να καταλάβεις τι πάει στραβά με τα CSS.
Σκέψου σε blocks.
Δες τις εικόνες και θα καταλάβεις.

Τώρα δεν ξέρω κατά πόσο "πρέπει" να πας με floats αλλά είναι κρίμα εν έτη 2018 soon το be 2019 να τα χρησιμοποιούμε ακόμη.
Δες ένα παράδειγμα με floats: https://codepen.io/anon/pen/NeqbbG?editors=1100
Δες ένα παράδειγμα με flexboxes: https://codepen.io/anon/pen/maJRJV?editors=1100

Πιο καθαρά και τα CSS και η HTML

oTadEfi · 12 Δεκεμβρίου 2018

18 ώρες πριν, XPHSTOS_ είπε

Είναι λάθος ο τρόπος προσέγγισης σου για την δομή της HTML.
Αν δομήσεις σωστά την HTML θα μπορέσεις πιο εύκολα να καταλάβεις τι πάει στραβά με τα CSS.
Σκέψου σε blocks.
Δες τις εικόνες και θα καταλάβεις.

Τώρα δεν ξέρω κατά πόσο "πρέπει" να πας με floats αλλά είναι κρίμα εν έτη 2018 soon το be 2019 να τα χρησιμοποιούμε ακόμη.
Δες ένα παράδειγμα με floats: https://codepen.io/anon/pen/NeqbbG?editors=1100
Δες ένα παράδειγμα με flexboxes: https://codepen.io/anon/pen/maJRJV?editors=1100

Πιο καθαρά και τα CSS και η HTML

Πολύ σωστή προσέγγιση αλλά επειδή είναι φοιτητής και για να μην τον πνίξουμε στα τεχνικά, μπορεί να κάνει αυτό που θέλει με tables!

Επειδή είχα παρόμοια εργασία στο παρελθόν, με tables θα πετύχει αυτό που θέλει. Αλλα αγαπάμε flexboxes!

14 Δεκεμβρίου 2018

Οπως πολύ σωστά αναφερθηκε η χρήση float είναι ξεπερασμένη πλέον... πρέπει να κάτσεις να μάθεις flexbox αν θές να σου μείνει κάτι πραγματικά απο την εργασία σου. Μετά μπορείς να πας σε Bootstrap

Επίσης το αλλο που μπορείς να κάνεις για να σε βοηθήσει είναι να κατεβάσεις ολόκληρα websites με κάποιο εργαλείο και σιγά σιγά να χωθείς και σε JavaScript

Επεξ/σία 14 Δεκεμβρίου 2018 από Επισκέπτης

Σύνδεση

Πρόβλημα με κείμενο σε site με HTML

Προτεινόμενες αναρτήσεις

Asevastos

genius_13

XPHSTOS_

oTadEfi

Επισκέπτης

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση