I'm trying to get my name inside of another block that contains the website name, but can't figure it out. What can I use?
I'm trying to get my website name with a smaller extension after it, shich works. But then i want my name underneath it without the space in between.
<div id="sitename">
<span id="address">website</span>
<span id="extension">.blah</span>
<span id="name">namegoeshere</span>
</div>
#sitename {
width: 330px;
margin: 35px auto 0 auto;
text-align: center;
cursor: default;
}
#address {
display: inline-block;
height: 65px;
font-size: 50pt;
font-weight: 800;
color: rgb(99,99,99);
}
#extension {
display: inline-block;
height: 65px;
font-size: 30pt;
font-weight: 800;
color: rgb(99,99,99)
}
#name {
display: block;
width: 72%;
text-align: right;
font-size: 11.5pt;
font-weight: 500;
color: rgb(99,99,99);
}
Fiddle: http://jsfiddle.net/CX5Dn/
is this what you want to achieve
html
<div id="sitename">
<span id="address">website<span id="extension">.blah</span></span>
<span id="name">namegoeshere</span>
</div>
css
#sitename {
width: 330px;
margin: 35px auto 0 auto;
text-align: center;
cursor: default;
}
#address {
display: inline-block;
height: 65px;
font-size: 50pt;
font-weight: 800;
color: rgb(99,99,99);
}
#extension {
display: inline-block;
height: 65px;
font-size: 30pt;
font-weight: 800;
color: rgb(99,99,99)
}
#name {
display: block;
width: 72%;
text-align: right;
font-size: 11.5pt;
font-weight: 500;
color: rgb(99,99,99);
}
working demo
Margins on the name.
#name {
display: block;
width: 72%;
text-align: right;
font-size: 11.5pt;
font-weight: 500;
color: rgb(99,99,99);
margin-top: -20px;
}
Related
This is basically my header and its a small project but my first time using OOCSS. I know that the principles are to seperate structure and skin to prevent repetetive code. But since my project is so small I have no clue of how i could implement it?
body {
font-family: "Lato", sans-serif;
background-color: white;
}
.wrapper {
max-width: 1024px;
margin: 0 auto;
background-color: #eee;
border: 1px solid black;
}
.header {
height: 350px;
background-image: url(bilder/vietnam_770.jpg);
background-repeat: no-repeat;
background-position: center;
}
.header h1 {
font-family: "Roboto", sans-serif;
font-size: 30px;
font-weight: 700;
float: left;
margin-left: 150px;
margin-top: 10px;
}
.meny ul {
list-style-type: none;
display: flex;
flex-direction: row;
float: right;
margin-right: 170px;
margin-top: 17px;
}
.meny li {
margin-left: 1em;
}
.meny a {
text-decoration: none;
font-size: 14px;
font-weight: 700;
color: black;
padding: 0.25em;
}
.meny a:hover {
color: darkgrey;
}
.meny .current {
border-bottom: 1px solid black;
}
.meny .current:hover {
color: black;
}
.beskrivning {
float: right;
width: 250px;
margin-right: 175px;
margin-top: 80px;
text-align: center;
}
.beskrivning h2 {
font-family: "Lato", sans-serif;
font-size: 24px;
font-weight: 700;
}
.beskrivning p {
margin-top: 0.5em;
font-size: 14px;
font-weight: 700;
line-height: 15px;
}
Tried reading and looking for examples but all examples had repetetive code which made it easy to determine.
This is my HTML and CSS code. If you run this, there will be a image of a macbook and a 'buy' button. When the browser is minimised, the image is alittle off from the center. When it is in full screen, it causes the image to move up and the 'buy' button gets pushed to the bottom. I tried to use position: fixed but it didnt work. How do you make the picture have fixed position in the middle
.new {
font-family: Arial;
color: rgb(202, 137, 15);
font-size: 18px;
margin-bottom: 15px;
}
.macbook {
font-family: Arial;
font-weight: bold;
font-size: 44px;
margin-top: 0px;
margin-bottom: 10px;
}
.supercharged {
font-family: Arial;
font-weight: bold;
font-size: 60px;
margin-top: 0px;
margin-bottom: 25px;
}
.price {
font-family: Arial;
font-size: 18px;
margin-top: 0px;
}
.button {
background-color: #007aff;
color: white;
border-radius: 100px;
font-weight: bold;
border: none;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 10px;
padding-top: 10px;
position: 50px;
}
.button:hover {
opacity: 0.8;
}
.button:active {
opacity: 0.5;
}
.charged {
color: plum;
text-decoration: underline;
}
.picture {
margin-top: 50px;
}
<!DOCTYPE html>
<html align='center'>
<body>
<p class='new'>New</p>
<h2 class='macbook'>MacBook Pro</h3>
<h1 class='supercharged'><span class='charged'>Supercharged</span> for pros.</h1>
<p class='price'>From $1999</p>
<button class='button'>Buy</button>
<img src="https://images.macrumors.com/t/PV_LL2AlRJvaRvbuXCTUOuDpwzU=/800x0/smart/article-new/2013/09/16-inch-macbook-pro.jpg?lossy" alt="Macbook" class='picture'>
</body>
</html>
Just apply display: block to the <a>-element. When you use display: block on an element, it will try to take up as much width as possible. Seeing as it is not inside a parent container, it will take up 100% width of the <body>-element, as that is the elements closest parent. This way, it won't wrap around the image. The link will however stretch and fill the entire parent container as well. To combat this, apply max-width: fit-content, so the link's width is only relative to its content. Then you can apply margin: auto to center the element again.
For a responsive image, apply max-width: 100% and height: auto. This way it will automatically scale down, as the max-width: 100% property won't let it overflow its parent container (the <body>-element)
body {
text-align: center;
}
.new {
font-family: Arial;
color: rgb(202, 137, 15);
font-size: 18px;
margin-bottom: 15px;
}
.macbook {
font-family: Arial;
font-weight: bold;
font-size: 44px;
margin-top: 0px;
margin-bottom: 10px;
}
.supercharged {
font-family: Arial;
font-weight: bold;
font-size: 60px;
margin-top: 0px;
margin-bottom: 25px;
}
.price {
font-family: Arial;
font-size: 18px;
margin-top: 0px;
}
.button {
background-color: #007aff;
color: white;
border-radius: 100px;
font-weight: bold;
border: none;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 10px;
padding-top: 10px;
position: 50px;
}
.button:hover {
opacity: 0.8;
}
.button:active {
opacity: 0.5;
}
.charged {
color: plum;
text-decoration: underline;
}
.picture {
margin-top: 50px;
max-width: 100%;
height: auto;
}
a {
display: block;
max-width: fit-content;
margin: auto;
}
<p class='new'>New</p>
<h2 class='macbook'>MacBook Pro</h3>
<h1 class='supercharged'><span class='charged'>Supercharged</span> for pros.</h1>
<p class='price'>From $1999</p>
<button class='button'>Buy</button>
<img src="https://images.macrumors.com/t/PV_LL2AlRJvaRvbuXCTUOuDpwzU=/800x0/smart/article-new/2013/09/16-inch-macbook-pro.jpg?lossy" alt="Macbook" class='picture'>
By default an image is displayed inline, which is causing your issue. You're on the right track, but instead of position fixed, position: block; would be a better choice.
(You can also centre your image and avoid it overflowing using a max-width and some margin)
.new {
font-family: Arial;
color: rgb(202, 137, 15);
font-size: 18px;
margin-bottom: 15px;
}
.macbook {
font-family: Arial;
font-weight: bold;
font-size: 44px;
margin-top: 0px;
margin-bottom: 10px;
}
.supercharged {
font-family: Arial;
font-weight: bold;
font-size: 60px;
margin-top: 0px;
margin-bottom: 25px;
}
.price {
font-family: Arial;
font-size: 18px;
margin-top: 0px;
}
.button {
background-color: #007aff;
color: white;
border-radius: 100px;
font-weight: bold;
border: none;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 10px;
padding-top: 10px;
position: 50px;
}
.button:hover {
opacity: 0.8;
}
.button:active {
opacity: 0.5;
}
.charged {
color: plum;
text-decoration: underline;
}
.picture {
margin: 50px auto 0 auto;
display: block;
max-width: 100%;
}
<!DOCTYPE html>
<html align='center'>
<body>
<p class='new'>New</p>
<h2 class='macbook'>MacBook Pro</h3>
<h1 class='supercharged'><span class='charged'>Supercharged</span> for pros.</h1>
<p class='price'>From $1999</p>
<button class='button'>Buy</button>
<img src="https://images.macrumors.com/t/PV_LL2AlRJvaRvbuXCTUOuDpwzU=/800x0/smart/article-new/2013/09/16-inch-macbook-pro.jpg?lossy" alt="Macbook" class='picture'>
</body>
</html>
So basically, I want to have 3 lines of text next to a <div>, like this (photoshop mockup):
This is my structure so far:
.gd-content .gd-c-match.in-match .gd-c-match-tutorial {
margin-top: -5px;
width: 100%;
height: 99px;
background-color: rgba(0, 0, 0, 0.66);
padding-top: 24px;
padding-bottom: 18px;
text-align: center;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section {
height: 57px;
width: 290px;
text-align: left;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title {
display: inline-block;
color: white;
font-size: 16px;
font-weight: 600;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title .subtitle {
display: block;
font-weight: 400;
color: #494949;
font-size: 14px;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .gd-c-tutorial-square {
display: inline-block;
text-align: center;
padding-top: 19px;
padding-right: 3px;
line-height: 17px;
font-family: 'Uni Sans';
font-weight: bold;
font-size: 24px;
color: white;
height: 100%;
width: 57px;
background-image: url('../../img/gd_content_match_tutorial_square.png');
}
<div class="gd-content">
<div class="gd-c-match in-match">
<div class="gd-c-match-tutorial">
<div class="gd-c-tutorial-section">
<div class="gd-c-tutorial-square">1</div><span class="title">Contact Opponent
<span class="subtitle">Add the other player</span></span>
</div>
</div>
</div>
</div>
And it works... for 2 lines.
But as soon as I get a linebreak (because of the text being too long - which is supposed to happen) it just breaks the whole thing:
Any suggestions on what to do?
Set the width of .title to 70%
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title {
display: inline-block;
color: white;
font-size: 16px;
font-weight: 600;
width:70%;
}
Hope this helps..Tested by me..
.gd-content .gd-c-match.in-match .gd-c-match-tutorial {
margin-top: -5px;
width: 100%;
height: 99px;
background-color: rgba(0, 0, 0, 0.66);
padding-top: 24px;
padding-bottom: 18px;
text-align: center;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section {
height: 57px;
width: 290px;
text-align: left;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title {
display: inline-block;
color: white;
font-size: 16px;
font-weight: 600;
width:70%;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title .subtitle {
display: block;
font-weight: 400;
color: #494949;
font-size: 14px;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .gd-c-tutorial-square {
display: inline-block;
text-align: center;
padding-top: 19px;
padding-right: 3px;
line-height: 17px;
font-family: 'Uni Sans';
font-weight: bold;
font-size: 24px;
color: white;
float: left;
height: 100%;
width: 57px;
background-image: url('../../img/gd_content_match_tutorial_square.png');
}
<div class="gd-content">
<div class="gd-c-match in-match">
<div class="gd-c-match-tutorial">
<div class="gd-c-tutorial-section">
<div class="gd-c-tutorial-square">1</div><span class="title">Contact Opponent
<span class="subtitle">Add the other player ingame and form a party</span></span>
</div>
</div>
</div>
</div>
I'm trying to create a match div, which show match information. However they should all be different sizes and it does not seem like it wants to center properly. I want all these text to be centered in the middle of the div? how can this be done?
.saperator {
margin-right: 17px;
vertical-align: text-bottom;
color: #787878;
}
.result-in-month {
padding: 25px 20px;
background: #efefef;
margin-bottom: 10px;
border-radius: 4px;
border: none;
transition: all 0.45s ease-in-out 0s;
position: relative;
}
.result-in-month:hover {
background: #FFF;
box-shadow: 0px 0px 3px 1px #e5e5e5;
}
.result-in-month {
padding: 20px 30px;
font-size: 15px;
}
.result-date {
display: inline-block;
width: 12%;
margin-right: 2%;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
line-height: 40px;
}
.result-stream {
display: inline-block;
width: 12%;
text-transform: uppercase;
line-height: 40px;
text-align: right;
color: #212121;
font-size: 36px;
}
.result-stream a:hover {
text-decoration: none;
}
.result-match-team-wrapper {
display: inline-block;
width: 72%;
text-align: center;
text-transform: uppercase;
line-height: 40px;
font-weight: normal;
font-size: 18px;
}
.result-match-versus {
padding: 0px 3px;
font-weight: normal;
color: #999999;
}
.result-match-team.left {
margin-right: 2.5%;
text-align: right;
}
.result-match-team.right {
margin-left: 2.5%;
text-align: left;
}
.result-match-team {
display: inline-block;
width: 40%;
}
.result-match-separator {
margin: 0px 2.5%;
}
#nav {
margin-left:0px !important;
}
#nav li {
display: inline-block;
padding: 4px 11px;
background-color: #fff;
margin-right: 6px;
}
#nav li a {
color: #000;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 400;
font-family: Oswald, Impact, sans-serif !important;
}
#nav li.active {
background-color: #000;
}
#nav li.active a {
color: #fff;
}
<div class="result-in-month">
<div class="result-date">
SLUT
</div>
<div class="result-match-team-wrapper">
<span class="result-match-team left">
TEAM 3
</span>
<span class="result-match-versus">
VS
</span>
<span class="result-match-team right">
TEAM 1
</span>
</div>
<div class="result-stream">
<span class="result-match-score" >2</span><span class="result-match-separator">-</span><span class="result-match-score">1</span>
</div>
<div class="clear"></div>
</div>
You could let the inner divs behave like table cells and then vertical align them.
div {
border: 1px solid grey;
}
.match-header {
display: table;
width: 100%;
height: 300px;
}
.v-center {
vertical-align: middle;
display: table-cell;
}
.player-a {
font-size: 3em;
text-align: center;
}
.player-b {
font-size: 6em;
text-align: center;
}
.score {
font-size: 1em;
text-align: center;
}
<div class="match-header">
<div class="player-a v-center">
Ann
</div>
<div class="score v-center">
5 vs 6
</div>
<div class="player-b v-center">
Bob
</div>
</div>
I would probably change the structure of your HTML but this should see you on the right track with what you've got.
Updated fiddle
You can use absolute positioning on the children elements of your result-in-month class like so
.result-date{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 12%;
margin-right: 2%;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
}
.result-match-team-wrapper {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-block;
width: 94%;
text-align: center;
text-transform: uppercase;
line-height: 40px;
font-weight: normal;
font-size: 18px;
}
.result-stream{
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
display: inline-block;
width: 12%;
text-transform: uppercase;
line-height: 40px;
text-align: right;
color: #212121;
font-size: 36px;
}
Do you mean something like this ?
https://jsfiddle.net/wgrLfxg3/4/
Because you are using elements you only declared the font and size in nav but not the rest of elements
add the follow to the other elements and it will work fine. Take a look to the fiddle
font-size: 18px;
font-weight: 400;
font-family: Oswald, Impact, sans-serif !important;
I can't make my background only in my text..allways go futher until the end of the screen.
Any idea what i'm doing wrong?
Here's my HTML:
<div class="textSlide">
<span id="firstTitle">We help you find everyone you</span>
<span id="secondTitle">need to get you started.</span>
<span id="thirdTitle">Look Ouch is an online meeting point where all kinds</span>
<span id="fourthTitle">of artists can unite to make ideas happen.</span>
</div>
Here's my CSS:
.textSlide span { z-index: 999; position: relative; margin-left: 10%; font-family: Montserrat; display: block; padding: 5px; }
.textSlide #firstTitle { margin-top: 120px; font-size: 34px; font-weight: bold; background-color: #7d37e6; color: #fff; }
.textSlide #secondTitle { font-size: 34px; font-weight: bold; margin-top: 5px; background-color: #7d37e6; color: #fff; }
.textSlide #thirdTitle { font-size: 18px; margin-top: 12px; background-color: #7933e1; color: #fff; }
.textSlide #fourthTitle { font-size: 18px; margin-top: 5px; background-color: #7933e1; color: #fff; }
FIDDLE
Change the display: block, to display: inline-block;
http://jsfiddle.net/w456u/1/
.textSlide span { z-index: 999; position: relative; margin-left: 10%; font-family: Montserrat; display: inline-block; padding: 5px; }
.textSlide #firstTitle { margin-top: 120px; font-size: 34px; font-weight: bold; background-color: #7d37e6; color: #fff; }
.textSlide #secondTitle { font-size: 34px; font-weight: bold; margin-top: 5px; background-color: #7d37e6; color: #fff; }
.textSlide #thirdTitle { font-size: 18px; margin-top: 12px; background-color: #7933e1; color: #fff; }
.textSlide #fourthTitle { font-size: 18px; margin-top: 5px; background-color: #7933e1; color: #fff; }