The issue I'm facing today is with the width of a gadget. I would like the border-bottom line of #customheader to extend to the full width of any given screen. Right now however the border-bottom is only the width of the blog. How would I go about lengthening the border-bottom without compromising on the other elements of the gadget?
The URL to my blog is as follows: http://www.blankesque.com and the coding to the gadget is stated below:
<style>
#customheader a {
font-size: 60px;
font-family: lato light, 'cantarell';
color: #737373;
text-transform: uppercase;
font-weight: normal!important;
letter-spacing: 0.07em;
}
#customheader {
margin: 7% 0 2% 0;
padding: 0 0 3.5% 0;
border-bottom: 1px solid #cccccc;
}
#customheader a:hover {
color: #000000!important;
}
</style>
<center>
<div id='customheader'>
<a href='http://www.blankesque.com'>Blankesque</a>
</div>
</center>
You need to move it outside of .content-outer, which is set to 1080px.
If possible, move the entire <header>...</header> outside of .content-outer
you could add an invisible div with position: absolute where you need the border, and set the width to 100%. Then you can either set the border on that or use the div as a border.
example JSFiddle
If you want a line that goes below your #customerheader and extends to the full width of the screen then its best to introduce an independent <hr/> which sits below your <center> element and has the following CSS properties:
hr {
width: 100%;
border-bottom: 1px solid #cccccc;
}
Keep in mind, you will have to remove the border-bottom: 1px solid #cccccc; from your #customerheader, since the horizontal line element is replacing this effect.
In retrospect, the above is not even necessary if you fix the layout issues in your site, which are causing your elements to seem to be out of alignment. You need to look into what is making them skew to the left, but with the code you have provided I cannot easily identify the root of the issue.
Let me know if you have any questions
Related
I'm trying to style my navbar and work on its aesthetics but I think I'm missing a trick. The darken which happens on the hover is too big for my liking, but the only size change I can do is an overall padding which doesn't allow fine tuning.
I've spent the last 2 hours looking for a solution and I'm stumped. I bet it's something simple and I'm just not seeing it.
#navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
height: 6%;
transition: top 0.3s;
z-index: 2;
}
#navbar a {
float: left;
display: block;
color: white;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
border-radius: 30px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
height: 6%;
border: 1px inset #000000;
}
<div id="navbar">
<div class=buttonContainer>
<div class="homeBorder">
Home </div>
Skills
Projects
About
Contact
</div>
</div>
Right now, your code does not show any "darkening" but I hope I still understood your question correctly: You want the background of the navbar links to be of a certain color on hover but the area is too big, especially in height?
You are right, your issue is caused by the 10px-padding that you have set on your link elements. I would recommend you to reduce the padding to maybe 5px to achieve the height you would like to see on hover (same padding for normal and hover, otherwise the links "jump" on hover). You could then wrap all links in an additional div to make universal changes or you could simply work with margins instead. I would also recommend not setting a specific height on the navbar but letting the elements inside determine its height by using padding and margin.
What always helps me when dealing with spacing in CSS, is adding differently colored backgrounds to ALL of the elements involved as to understand their behavior and to test my code.
In case there is a specific reason why you cannot reduce the padding, then please edit your question and make your requirements clearer.
Btw, there is one fatal error in your code:
<div class=buttonContainer>
should be:
<div class="buttonContainer">
(quotes!!)
...and ideally it should be:
<div class="button-container">
as it's not best practise to use camel case in CSS as opposed to JS or other programming languages.
Issue is pretty straight-forward. My CSS is being completely ignored, but I don't know why. The .Home .lander part works fine, except the border doesn't show up. The bigger problem is the box I'm trying to make under it. No CSS I'm typing for the box is working. Again, all I want to do is make a box. I followed the tutorial here: https://www.w3schools.com/css/css_boxmodel.asp but so far absolutely none of this is working for me.
The .js file:
import React from "react";
import "./Home.css";
export default function Home() {
return (
<div className="Home">
<div className="lander">
<h1>Remind</h1>
<p>A simple fitness tracker app</p>
</div>
<div className="box">
Countdown Timer
</div>
</div>
);
}
The CSS file:
.Home .lander {
padding: 80px 0;
text-align: center;
border: 5px grey;
}
.Home .lander h1 {
font-family: "Open Sans", sans-serif;
font-weight: 600;
}
.Home .lander p {
color: #999;
}
.Home .box {
height: 20%;
width: 20%;
border: 5px rgb(129, 56, 56);
margin: 10px;
box-sizing: border-box;
}
I did some reading on CSS specificity, so I tried changing from className to id. Nothing. I tried all pixels (for consistency?). Nothing. I even tried manipulating the CSS that otherwise works, like the .Home .lander, but the border won't show up. What am I missing? Why can't I make a box?! Four sides. Enclosing text. Really, really simple stuff here, but I'm getting absolutely nowhere.
Firstly, your border definition is incorrect. When using shorthand css you need to make sure you define everything. So you would do
border: 5px solid grey;
You're doing the same thing with the box. The border property needs to know what type of border you want: solid, dotted, dashed, whatever. So change the border attribute to the following:
border: 5px solid rgb(129, 56, 56)
Lastly, using percentages for width and height only works if you've defined the element's parent width as well. So you'll need to do the following:
.Home { width: 100% }
My div tag seems to be having a margin towards the top between the div and the body tag
body {
margin: 0px;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
background-color: green;
border: 2px solid black;
}
div.container {
max-width: 920px;
height: 100%;
margin: 0px auto;
padding-left: 20px;
padding-right: 20px;
background-color: #e1e1e1;
display: block;
//border: 2px dotted black;
}
Here are my two css for body and div, if I include the border code in the div tag then the color is blue all the way till the top otherwise there is margin of green inbetween the div and the body tag.
How do I remove this margin without using a border ?
Browsers may have built-in styles which can make some difference in some cases. These built-in styles may include paddings, margins, other kinds of spacings, styles for tables, etc.
Here is a project which when included, normalizes every style which may be applied by the browser. https://necolas.github.io/normalize.css/
As far as I know, every CSS framework use this technique too.
If that doesn't solve your issue, try to use Chrome Dev Tools or other debugging tool to check the actual DOM. The tool can provide you information about actual paddings, margins, and dimensions. For Chrome, right click your page and choose inspect element or something similar. You'll have a similar option in most of the modern browsers.
My CSS:
h1 {
background-color: #f7953d;
color: #FFF;
width: 100%;
padding: 6px 0 6px 10px;
margin-bottom: 10px;
}
My HTML
<h1>Hello World</h1>
The background color is always stretched to 100% of the screen. How do I make the background color stop after "World" in the h1 tag, and not go all the way to the end of the screen?
H1 is by default a block element and so will span the full width of its parent container you want to make it an inline element (much like a span) in order for it to only be as wide as its contents.
There are 2 possible solutions dependent on your compatability needs
display:inline;
will achieve the effect your after however it does mean that whatever follows your H1 could appear on the same line.
display:inline-block;
Has the effect your after while still forcing anything following it to appear below the H1 the only downside to this is it can throw up some issues in IE<8 see quirksmode for more details
You can do this by adding display: inline-block; to the CSS for your <h1>. This will make it use only as much width as its contents and still respect the margin and padding you give it.
I would suggest something like this:
HTML:
<h1>Hello World</h1>
<div class="clear"></div>
<p>Elements after unafected by float</p>
CSS:
h1 {
background-color: #f7953d;
color: #FFF;
padding: 6px 0 6px 10px;
margin-bottom: 10px;
float:left;
}
.clear {
clear:both;
}
This works consistently (unlike inline-block which isn't supported by all browsers).
An inline of the element is probably not what you want since you require padding.
The following code is setup in the template to show each time a new sidebar widget is inserted. (It shows around each new widget)
<div class="sidebox-top"></div>
<div class="sidebox">
<div class="widgets">
<div class="textwidget">
[WIDGET CONTENT]
</div>
</div>
</div>
The above displays the following CSS:
.sidebox-top {
background-image: url("/images/top-border-side.gif");
background-position: center top;
background-repeat: no-repeat;
height: 4px;
}
.sidebox {
border-bottom: 1px solid #D9D9D9;
border-left: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
margin-bottom: 14px;
padding: 10px 18px 5px;
}
The result is this:
This works great for most all widgets used. However, I want the above images to show in the sidebar without the sidebox-top blue line or border. I know there is a way to use certain CSS symbols to identify before or after by using the > symbol, I'm just not sure how to use that here or if it will even work.
Any help is always appreciated. Thank you!
Replicating the issue
Okay, I've attempted to replicate your image in this JSFiddle demo. In case JSFiddle is down, here is what this looks like:
For this instead of using a background-image and 4px height on .sidebox-top, I've simply used a 4px border-top. Whilst not an identical replication, this achieves the same basic effect.
Hiding the .sidebox-top element
Step 1
To begin with, we need to target the very first child contained within the .textwidget divider, only if it's an img. We do not want to apply this styling to any other img elements after that, nor do we want to apply the styling if the img isn't the first element within the container. To do this, we can use:
.textwidget img:first-child { ... }
Step 2
The next step is to give our image top padding and negative top margin equal to the sum of the top padding of .sidebox and the height of .sidebox-top. We then want to give our image a background which is the same colour as the background of your widget:*
.textwidget img:first-child {
background: #fff;
padding-top:14px;
margin-top: -14px;
}
* Note: This assumes that your widget's background is the same as your widget's container's background and that the background is a solid colour. If it isn't, you'll need to play around with background-position to align your patterned background with the widget's background.
From this, we end up with our image overlapping the top border whilst remaining in the same position that it started in:
Step 3
The third step is to cover the entire .sidebox-top. To do this we're going to need to give our selected img left and right padding and negative left and right margin equal to the sum of the left and right padding of the .sidebox and its border-width:
.textwidget img:first-child {
... /* Styling from Step 2 */
padding-left: 18px;
padding-right: 18px;
margin-left: -19px;
margin-right: -19px;
}
Step 4
Step 3 has certainly covered the entire .sidebox-top, but it's also covered the borders of .sidebox. For this we need to add identical borders to our selected img and reduce the left and right padding on our img to allow for this:
.textwidget img:first-child {
... /* Styling from Step 2 */
padding-left: 17px;
padding-right: 17px;
... /* Margins from Step 3 */
border-left: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
}
Final Step
The final step is to add a top border to our img to complete the border of the widget. As with Step 4, for this we'll need to reduce the size of the top padding to allow for this border:
.textwidget img:first-child {
... /* Styling from previous steps */
padding-top: 13px;
border-top: 1px solid #D9D9D9;
}
Final JSFiddle demo.