Just nu i M3-nätverket
Gå till innehåll

CSS rutor med logotyper i.


Rekommendera Poster

Postad (redigerade)

Jag försöker utforma CSS rutor som det ska ligga logotyper i, som blir låsta till att inte bli större än 200 pixlar på största måttet (bredden eller höjden, Verkar vara vanligast att loggorna är bredare än vad de är höga, men några få undan tag finns det.)

 

Problemet jag stött på är vertikal centrering av bilderna. Fast jag googlat fram vad jag ska göra, så blir inte resultatet som jag hoppats. Loggorna ligger högst upp i rutan alla fall.

 

I slutändan är CSS koden tänkt att användas på en Wordpress-sida med Gutenberg redigeraren. Kan jag slippa "Divarna" vore jag glad. Tänker att jag lägger in bilderna i Gutenbergs kolumner. Men att de sedan ligger snyggt i höjdled. Jag vill slippa "divarna" så att någon som lägger in logotyperna med rätt CSS tag får ramen direkt, utan att pilla i koden.

 

Begär jag för mycket? :)

 

Tack på förhand.

 

Citat

<!DOCTYPE html>
<html>
<head>
<style> 
#rcorners1 {
  border-radius: 50px 50px 50px 50px;
  background: #000;
  padding: 20px; 
  width: 250px;
  height: 250px; 
}

#img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
}
</style>
</head>
<body>

<div id="rcorners1" width="200px"><img src="logo1.png" id="img" width="200px"></div>
<div id="rcorners1" width="200px"><img src="logo2.png" id="img" width="200px"></div>
</body>
</html>

 

Redigerad av eken81
Länk till inlägg
Dela på andra webbplatser

Utan någon kod att titta på, för att se vad du gjort och vad som som ställer till det för dig, så är det mycket svårt att komma med bra hjälp.

Länk till inlägg
Dela på andra webbplatser

Aj tusan, planerade så klart att lägga in koden, men jag glömde. Lägger in den så snart jag har tillgång till den.

Länk till inlägg
Dela på andra webbplatser
ChromaWoods

För det första är din HTML ogiltig. id-attributet ska vara unikt. Använd klasser för att styla.

 

För det andra är width-attributet alltid i pixlar, du ska enbart använda siffror.

 

För det tredje, se min jsbin ovan för inspiration.

Länk till inlägg
Dela på andra webbplatser
2021-05-07 17:01, skrev ChromaWoods:

För det första är din HTML ogiltig. id-attributet ska vara unikt. Använd klasser för att styla.

 

För det andra är width-attributet alltid i pixlar, du ska enbart använda siffror.

 

För det tredje, se min jsbin ovan för inspiration.

Hej

 

Ogiltig html, tänkte först att det spelar ingen roll, ska ändå bara använda CSSen på en wordpress sida, nu insåg jag vad du sa, har ändrat till klasser. Skyller på att jag är rostig i HTML kodning. :)

 

Width-attributet, i CSS-koden i alla fall så verkar den gå sönder om jag tar bort px ändelsen, blir lika bred som skärmen. I img taggen verkar den gå med på att bara skriva siffror.

 

kikar på ditt förslag och klurar vidare.

 

 

 

 

Länk till inlägg
Dela på andra webbplatser
Citat

<!DOCTYPE html>
<html>
<head>
<style>
.rcorners1 {
  border-radius: 50px 50px 50px 50px;
  background: #000;
  padding: 20px;
  width: 250px;
  height: 250px;
  display: flex;
  justify-content: center;
}

.img1 {
  object-fit: contain;
  align-self: center;
  max-width: 200px;
  max-height: 200px;
 
}
</style>
</head>
<body>

<div class="rcorners1"><img src="logga1.png" id="img1"></div>
<div class="rcorners1"><img src="logga2.png" id="img1"></div>
</body>
</html>

 

Så här ser koden ut nu efter att jag sett på förslaget och kikat runt lite mer.

 

Jag har använt 2 exempelloggor när jag testat, en som är 1030*215 pixlar och en som är 254*360 pixlar. Den första bryr sig inte om bredden på rutan den borde anpassa sig till utan blir på tok för bred.

 

Jag vill kort sagt att bilderna på största måttet inte ska vara större än 200 pixlar och behålla aspect ratio/ formen. Kanske är det lättare att trycka in alla loggorna i photoshop och skala ner dem, men hade hoppats på att slippa det.

Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu


×
×
  • Skapa nytt...