Προς το περιεχόμενο

html design με divs

zoranb

Από τον zoranb
στο Web Design - Development

 Share

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

zoranb Crazy Insomniac

zoranb

Δημοσ.
  • Μέλος
Δημοσ. (επεξεργασμένο)

Καλησπέρα Δάσκαλε... δεν μπορώ να αντιληφθώ πώς μπορώ με τον κώδικα που έχω, να γίνει το κάτω!

 

margin-how.jpg

 

 

 

<head>
   
  
  <div style="background-color: #e5e5e5;
            color: white; 
            border-radius: 0px 0px 0px 0px;
            font-family: Helvetica, sans-serif;
            font-weight: 100;
            color: gray;
            font-size: 14px;
            padding: 0px 45px 0px 40px;
            margin: 0px 25px 0px -25px;
            margin: auto
            line-height: 23px;
            width: auto%;
            text-align: justify;">

  <br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  <br>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 

    </div>
  
</div>


</head>

Επεξ/σία από zoranb
ulb Proficient

ulb

Δημοσ.
Δημοσ.
Στις 1/8/2023 στις 12:35 ΠΜ, zoranb είπε

Προσπαθώ να φτιάξω το παρακάτω σχέδιο σε HTML χρησημοποιόντας divs αλλά δεν τόχω... υπάρχει κανείς να με κατευθύνει;

TitleTextBox.png 

<div class="main-body">
  <div class="title-text">
    <span>Lorem</span>
  </div>
  <p class="main-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum libero sit amet diam molestie fermentum. Praesent tincidunt vitae diam nec rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>


<style>
	.main-body {
		background-color: #f2f2f2;
		border-radius: 50px 0 50px 0;
		width: 850px;
		padding: 10px;
		margin: auto;
		font-family: system-ui;
	}

	.title-text {
		text-align: center;
		color: chocolate;
		font-weight: bold;
		font-size: 1.5rem;
		padding-bottom: -20px;
	}

	.main-text {
		font-size: 1.2rem;
		word-spacing: 10px;
		margin: 5px 20px 20px 20px;
	}
</style>

 

  • Like 1
zoranb Crazy Insomniac

zoranb

Δημοσ.
  • Μέλος
Δημοσ. (επεξεργασμένο)

#ulb βάζω τον κώδικά σου στο VSCode αλλά δεν λειτουργεί... λείπει κάτι;

Επεξ/σία από zoranb
rafinos Grand Master

rafinos

Δημοσ.
Δημοσ.
Στις 28/8/2023 στις 10:43 ΠΜ, zoranb είπε

#ulb βάζω τον κώδικά σου στο VSCode αλλά δεν λειτουργεί... λείπει κάτι;

το <style></style> πρέπει αν μπει μέσα στο <head></head>

  • Like 1
zoranb Crazy Insomniac

zoranb

Δημοσ.
  • Μέλος
Δημοσ.

Έχω φτιάξει το σχέδιο που σας επισυνάπτω, μόνο με divs, με τον παρακάτω κώδικα. Θα ήθελα να μου πείτε εάν είναι σωστά γραμμένος ο κώδικας ή εάν βλέπετε κάτι που θα μπορούσε να γραφτεί πιό σωστά.

<!DOCTYPE html>
<html>
<head>
 
</head>
 
<div class="RED-div">
<div class="GREEN-div">
<div class="BLUE-div">
</div>
</div>
</div>
 
<style>
.RED-div {
background-color: red;
width: auto;
padding: 30px
}
 
.GREEN-div {
background-color: green;
width: auto;
padding: 30px;
}
 
.BLUE-div {
background-color: blue;
width: auto;
padding: 30px;
}
</style>
 
<body>
</body>
 
</html>

Screenshot 2023-09-03 at 22.11.27.png

rafinos Grand Master

rafinos

Δημοσ.
Δημοσ.

Το width: auto δεν χρειάζεται. Τα divs είναι by default "blocks" που σημαίνει ότι καταλαμβάνουν το 100% του διαθέσιμου χώρου. Στην περίπτωσή σου συμβαίνει αυτό που βλέπεις γιατί πολύ απλά κάθε div έχει συγκεκριμένο padding. Το width: auto με το width: 850px; δεν έχουν καμία σχέση. Το ένα ορίζει συγκεκριμένο μέγεθος και το άλλο όχι.

  • Like 1

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

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

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

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

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

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...