I have designs which have a blue bar underneath text as a theme, such as the images below
I have currently been structuring my html like this for these bars:
<div class="Header">
<h4>My Website</h4>
<div class="YBlock2"></div>
</div>
Where the CSS class is defined as
.YBlock2{
background-color:blue;
width: 50px;
height: 10px;
}
However, I have been wondering if this is the best way to do this. It looks great on my computer, but I do not know if it is the best practice to use when aiming for the site to be used on a variety of different screen sizes and devices, or the best way in general.
You can use pseudo-elements as :after.
h4:after {
content: '';
display: block;
margin-top: 3px;
width: 50px;
height: 10px;
background-color: blue;
}
<h4>My website</h4>
Probably a pseudo element is best, but for fun you could also do this.
h1 {
max-width: 50px;
border-bottom: 3px solid blue;
overflow-x: visible;
white-space: nowrap;
}
<h1>Bananas are pretty tasty</h1>
<p>So are pears</p>
Related
I want to style only the content area of a div having a padding to visualize its content boundary like the inner box in the dev-tools is colored by the web browser. I've tried many things but either the css recommendations are not yet implemented like or maybe I use it in the wrong way.
<div class="around">
<div class="div-with-padding outline-content">
stuff ...
</div>
</div>
.around { margin: 50px auto; width: 400px; padding: 0px; }
.div-with-padding { min-height: 200px; padding: 15px; }
I've added an outline to the div just for comparison. The position: relative below is needed because its child's max-height/width only fits to the matched div if its position is relative.
.outline-content {
outline: 1px solid red;
position: relative; /* in the original post I've used bootstrap instead */
}
I've found no way to do this within the original div so I've added a pseudo-element.
First try:
.outline-content::before {
content: '';
position: absolute;
width: max-content; height: max-content;
outline: 1px dotted blue;
}
I don't really understand how max-content works. I've tried also others mdn. Maybe it doesn't work because I've set position: absolute; to don't change the page itself.
Second try:
.outline-content::before {
content: '';
position: absolute;
width: calc(100% - 30px); height: calc(100% - 30px);
outline: 1px dotted blue;
}
The question is how to get parent's padding = 30px if it isn't always the same. I've tried much more but without success.
I know with jQuery this problem becomes easy. If anybody knows an answer using only css … I really like to know it. Please also correct mistakes in my code snippets (width: max-content; and the like).
Thanks!
(this post includes some adaptions to the comments)
The magic css-property is called "background-clip".
HTML
<div class="outer">
outer-content
<div class="inner">
inner-content
</div>
</div>
CSS
.outer {
display:inline-block;
background-color: red;
border: 1px solid black;
padding: 10px;
}
.inner {
width: 100px;
height: 100px;
padding: 10px;
background-clip: content-box;
-moz-background-clip: content-box;
background-color: green;
border: 1px solid black;
}
Example: http://jsfiddle.net/u2vyqdc6/2/
As you can see:
One surrounding div with some content and some padding so you can see better what's going on.
Inside is another div with content, padding and "background-clip: content-box".
"background-clip" works just like "(-moz-)border-box". It tells the browser how to handle the background-specific box-model.
And the best thing?
Browser-support is almost universal at 95%:
http://caniuse.com/#feat=background-img-opts
I am working on a Wordpress blog, and I am trying to figure out how to add horizontal lines on each side of some of my titles like the ones in this link:
http://falive.jegtheme.com/?slider=highlightslider&homelayout=normal&homesidebar=true&layout=full&header=1&sticky=true
In the blog above, titles in the sidebar, and the 'share this article' title has the desired effect that I am looking for, but can't seem to figure out how to get it. I know the basics of HTML and CSS, so this could be something that I am simply overlooking or just haven't learned yet.
Also, is there a way to take this type of styling to the next level by adding more unique types of lines (like long curly lines) through CSS?
Thanks in advance!
use :before or :after
Example 1:
h2{
padding: 0 20px;
text-align: center;
}
h2:before,
h2:after{
content: '';
width: 150px;
height: 1px;
margin: 0 10px;
background: #ccc;
display: inline-block;
vertical-align: middle;
}
<h2>title</h2>
<h2>title title title</h2>
Example 2
div{
text-align: center;
}
h2 {
padding: 0 20px;
position: relative;
text-align: center;
display: inline-block;
}
h2:before,
h2:after {
content:'';
width: 100%;
position: absolute; top: 50%;
height: 1px;
background: #ccc;
transform: translateY(-50%);
}
h2:before{
right: 100%;
}
h2:after{
left: 100%;
}
<div>
<h2>title</h2>
<br>
<h2>title title title</h2>
</div>
Using your browser's developer tools, inspect the span elements containing those titles. You'll see :before and :after CSS3 selectors in which some positional/border styling is used.
Can you use other kinds of lines? Sure -- CSS3 would allow you to use a wide variety of things, but the list is probably too long to list here on SO.
I've been learning HTML and CSS for around 2 months, but apparently I'm still a neophyte. I'm trying to create somewhat of a header nav bar here, but when ever I set the property display:inline, poof ! They disappear. I'm pretty sure this problem is rudimentary but any input you have helps.
div {
border-radius: 5px 55px 5px 55px;
}
#Header {
height: 50px;
width: 200px;
background-color: #f38630;
margin-bottom: 10px;
margin-top: 10px;
display: inline;
}
.Left {
height: 300px;
width: 150px;
background-color: #A7DBD8;
float: left;
margin-bottom: 10px;
}
.Right {
height: 300px;
width: 450px;
background-color: #E0E4CC;
float: right;
margin-bottom: 10px;
}
#Footer {
height: 50px;
background-color: #69D2E7;
clear: both;
}
In nutshell, you should not be using display: inline for anything that is not intended to be a displayed inside a block of text.
This is a good site for learning layout basics: http://learnlayout.com
If you really want to learn this stuff though, this is the best place I know: https://dash.generalassemb.ly :)
Hope that helps. Let me know if you don’t feel I’ve answered your question.
I would not use display : inline -block for divs but apply it to the list items or a tags.
It has to do with the generation of containing blocks, whether or not your element is inline or block, also the type of positioning. An inline element without content will not show.
Here is the de facto resource for your problem:
de facto web standards
visual rendering
I'm creating some kind of chat box for my website and I can't make vertical scrollbar to appear outside the border.
This is what I'm getting:
All I want is that scrollbar to appear outside the border, on the right. It's not really pretty as it is now, is it.
The main HTML code (with one message insise the chatbox) of thix box looks like this:
<div id="sb_body">
<div id="sb_messages_set">
<div class="sb_message">
<div class="sb_message_header">
<div class="sb_message_author">PookyFan</div>
<div class="sb_message_hour">12:11</div>
</div>
<div class="sb_message_content">test</div>
</div>
</div>
<!-- Some other chatbox's elements -->
</div>
My CSS code looks like this:
div#sb_messages_set
{
border: 2px solid black;
border-radius: 10px;
background-color: #0080E0;
overflow: auto;
height: 300px;
}
div.sb_message
{
margin: 2px 4px 5px 4px;
border-bottom-style: dashed;
border-width: 1px;
border-color: black;
}
div.sb_message_header
{
clear: both;
display: block;
margin-bottom: 3px;
}
div.sb_message_author
{
display: inline;
text-align: left;
font-weight: bold;
}
div.sb_message_hour
{
display: inline;
float: right;
}
div.sb_message_content
{
clear: both;
text-align: left;
padding-bottom: 5px;
}
Is there any way to achieve what I want? I was looking for answer but didn't find anything that would solve my problem.
Oh, and if there's anything wrong with my code but it's not connected with my issue, please share your thoughts, I started having fun with creating websites pretty recently so it's possible that I make some newbie mistakes here and am not really aware of it.
Edit: important thing I forgot to mention about - I want the border to be fully visible all the time, I mean - I want just the messages to be scrolled, but wihout making the border be scrolled with it.
In other words, I don't want anything like that:
In this picture the chatbox has been scrolled a little and the top and bottom frame isn't visible. But I want the entire frame to be visible despite div's content being scrolled.
Well, if that won't work, and you're married to the design, I think you have to use a bg image. I can't find a way to style the scrollbar with CSS. I made another jsfiddle with this solution demonstrated: http://jsfiddle.net/jlmyers42/mrx46geg/
But basically, you just move some of your CSS around:
#sb_body {
width: 272px;
height: 300px;
overflow: auto;
padding: 0;
margin: 0;
background: url("http://arcsuviam.com/play/random/bluebg.png") no-repeat left top;
}
div#sb_messages_set {
margin: 5px;
}
div.sb_message {
padding: 2px 4px 5px 4px;
border-bottom-style: dashed;
border-width: 1px;
border-color: black;
}
I'd put the whole thing in a container that has the overflow:auto style applied.
See this fiddle: http://jsfiddle.net/jlmyers42/8tptqt19/
<div id="sb_body">
<div id="sb_container">
<div id="sb_messages_set">
<div class="sb_message">
<div class="sb_message_header">
<div class="sb_message_author">PookyFan</div>
<div class="sb_message_hour">12:11</div>
</div>
<div class="sb_message_content">test</div>
</div>
</div>
</div>
<!-- Some other chatbox's elements -->
</div>
CSS
div#sb_container {
overflow: auto;
}
Simple.
With your div
Put the static width like below:
#divID{
overflow: hidden;
width: calc(1024px + 0);
}
#divID:hover{
overflow-y:scroll;
}
Stumbled across it and works for me. My div is positioned absolute if that makes a difference.
The scroll bar appears outside the div when hovered on
so you can check out that site - it describes you the solution precisely. I created a small jsfiddle for you. Note here that the text-div inside the "li" has a width in "vw". This makes the effect of scrolling outside the content. Hope this helps!
HTML
<ul><li id="lio" class="open"><div class="text">
Lorem..
</div></li></ul>
<button>
Halo
</button>
CSS
.open {
overflow: hidden;
display: block;
width: 100%;
height: 100px;
background-color: red;
}
.text {
padding: 15px;
background-color: orange;
width: 30vw;
}
ul {
display: table;
}
JQUERY
$(document).ready(function() {
http://jsfiddle.net/fcLzqp5o/#run
$("button").click(function() {
$("#lio").css("overflow-y", "scroll");
});
});
Is it possible to highlight an area of the page after user clicks a same-page link? I am using a 3 column layout and the part of the page I'm linking to is located on the right hand side. I just want to make sure the user sees it instantly, rather than having to look for it.
Thanks!
Edit: Thanks for the replies! I think it would be better for me to use the :target method as I understand how it work. I have very little knowledge of jquery and prefer to understand what I'm coding if at all possible :-P
Use the :target pseudo-class to select it in your stylesheet for highlighting.
Link
and
<div id="foo">content here</div>
and
div:target { background: yellow; }
in your stylesheet
You can use javascript or Jquery to achieve this. Using code similar like this
$("#link").click(function(){
$("#myDivToShow").css("background-color","maroon");
});
JS Fiddle Demo
You can also use animation or css transition to show effects with background-color as well.
In addition to the other answers, yes you can do this with CSS with :active, :hover, but this implies:
Nesting your columns in your navigation, with an absolute position
Having to manually specify the height of the columns or make them relative to the content in it.
Here is a sample:
http://jsbin.com/upapey/2/edit
And the code for later reference:
The HTML:
<body>
<div id="wrapper">
<div id="nav">
<a href="#col_1">Col 1
<div id="col_1" class="col"></div>
</a>
<a href="#col_2">Col 2
<div id="col_2" class="col"></div>
</a>
<a href="#col_3">Col 3
<div id="col_3" class="col"></div>
</a>
</div>
</div>
</body>
The CSS:
#wrapper {
width: 100%;
height: 100%;
}
#nav {
width: 100%;
}
a {
display: block;
float: left;
margin-right: 10px;
}
div.col {
position: absolute;
width: 30%;
min-height: 320px;
max-height: 2000px;
border: 1px solid blue;
cursor: default !important;
margin-top: 10px;
}
div#col_2 {
margin-left: 25%;
}
div#col_3 {
margin-left: 50%;
}
/* a:hover must be before a:active, else the latter won't be triggered */
a:hover .col {
border: 1px solid green;
}
a:active .col {
border: 1px solid red;
}