Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

CSS rutor med logotyper i.

eken81

Startad av eken81,
i Webbutveckling

 Share

Rekommendera Poster

eken81

eken81

Postad
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 kommentar
Dela på andra webbplatser
Cluster

Cluster

Postad
Postad

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 kommentar
Dela på andra webbplatser
eken81

eken81

Postad
  • Trådskapare
Postad

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 kommentar
Dela på andra webbplatser
ChromaWoods

ChromaWoods

Postad
Postad

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 kommentar
Dela på andra webbplatser
eken81

eken81

Postad
  • Trådskapare
Postad
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 kommentar
Dela på andra webbplatser
eken81

eken81

Postad
  • Trådskapare
Postad
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 kommentar
Dela på andra webbplatser
  • 2 veckor senare...
ChromaWoods

ChromaWoods

Postad
Postad

Men du använder ju fortfarande ID i HTML:en. :) Din CSS för .img1 gör inte ett smack för du har inget element med den klassen. Ta bort id="img1" och byt till class="img1" (eller kanske nåt mer användbart namn) så kommer det börja hända grejer.

 

Och ang. width-attributet. Jag var nog lite otydlig. Det är alltså HTML-attributet width som är enhetslöst, inte dittot i CSS.

Länk till kommentar
Dela på andra webbplatser
 Share
Gå till ämneslista


×
×
  • Skapa nytt...