WN

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   Behöver lite hjälp med CSS. (https://www.wn.se/forum/showthread.php?t=1065485)

naak2803 2015-09-07 17:21

Behöver lite hjälp med CSS.
 
Hej,
Jag behöver uppnå detta med CSS. problemet är att när jag sätter en margin-left: 20px när på en div som är 100%, skjuter den ut diven med 20 px vilket blir fel när jag har text i diven... då syns inte hela texten. Hur ska jag göra för att lyckas? jsfiddler-länk skulle uppskatta mkt.

Kan uppnå det med table, men det känns som man skulle kunna göra det med divvar.

Så här blir det
https://imgi.se/i/238286.png

Så här vill jag att det ska vara
https://imgi.se/i/1ce164.png

nosnaj 2015-09-07 18:06

Om du tar bort koden som anger div till 100% fungerar det nog som tänkt?
En div fyller ut hela sin bredd som standard, har ingen testmiljö nu, men antar problemet uppstår därför du anger 100% och då putts den ut lika mycket som du ger den margin.

allstars 2015-09-07 18:51

Detta borde fungera
Kod:

blockquote {margin:0;padding:0; padding-left:20px}
blockquote p{border-left: 5px solid orange; padding-left:20px}

Kod:

<blockquote><p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></blockquote>

naak2803 2015-09-07 20:27

Citat:

Ursprungligen postat av allstars (Inlägg 20512561)
Detta borde fungera
Kod:

blockquote {margin:0;padding:0; padding-left:20px}
blockquote p{border-left: 5px solid orange; padding-left:20px}

Kod:

<blockquote><p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></blockquote>

tackar det var exakt detta jag letade efter.

naak2803 2015-09-07 22:49

Citat:

Ursprungligen postat av allstars (Inlägg 20512561)
Detta borde fungera
Kod:

blockquote {margin:0;padding:0; padding-left:20px}
blockquote p{border-left: 5px solid orange; padding-left:20px}

Kod:

<blockquote><p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></blockquote>

tackar det var exakt detta jag letade efter.


Alla tider är GMT +2. Klockan är nu 10:34.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson