Questions about CSS

I am currently in the process of creating a new website and I am encountering some challenges. Here is a preview of the HTML/CSS:

Specifically, I have some questions regarding the CSS:

1) Why does the hover effect only work on "OM OS" and "KONSULENT," but not on the other links?

2) Why is the black "TESTIMONIALS" section so wide?

3) The elements "FORSKNING NYHEDER BØGER FORESPOERGSEL" seem to have excessive white space above them. Any insight into why this may be happening?

Thank you in advance for any assistance.

htmlfirefoxgoogle-chromecss

Answer №1

1) Arrange your code like this:

#header #tag-cloud #community {
color: #A7A6A6;
}

Place the above code before:

#header #tag-cloud a:hover {
color: #F46446;
}

This way, your links will have a unique color, but all links on hover will have the same color. Makes sense, right?

2) To widen testimonials, use the following CSS:

#header #testimonials {
width: 300px;
float: right;
}

3) Style your links as block elements with smaller text size:

#header #tag-cloud .tiny-text {
font-size: 0.6em;
display: block;
float: left;
}

Hope these tips are helpful for you!

Answer №2

It seems like the id "testimonials" is being used twice in your code. Make sure to check that and ensure each id is unique to one element on the page. Although not tested by me, it's important for proper functionality.

UPDATE: Upon a closer inspection just now, it may not be the main issue but definitely something that should be addressed and fixed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A tutorial on how to showcase choices in a collection_select using the Rails controller

When a user selects a specific designation, the corresponding benefits should be loaded in a dropdown menu. I have implemented this functionality using an ajax call. HTML: <label>Designations</label> <%= f.association :designation, input_h ...

htmlruby-on-railsajax

"Uncovering the ways iOS disrupts background-size functionality

I am currently working on creating several marked images that will adjust in size to fit the length of their content. This functionality works well on most browsers, except for those on iOS devices like iPhone and iPad. Take a look at the image-link below ...

htmlioscssiphoneipad

Simply modifying a custom attribute source using jQuery does not result in it being refreshed

Introduction: Utilizing jQuery.elevateZoom-3.0.8 to display zoomed-in images. The SRC attribute contains the path to the smaller/normal image The DATA-ZOOM-IMAGE attribute holds the path to the larger image used for zooming. Here is the HTML Code: ...

javascriptjqueryhtmlimageelevatezoom

Tips for increasing the number of inputs within a form using <script> elements

I am currently working on a form within the script tags and I would like to include additional input fields before submitting. However, the submit button seems to be malfunctioning and I suspect that there may be an issue with how I am accessing it in my c ...

javascriptjqueryhtmlforms

Video on Youtube keeps playing even after the overlay is closed

I successfully created an overlay with an embedded YouTube video that automatically opens when the page loads. Everything was going smoothly until I encountered a problem - when I close the overlay while the video is playing, the audio continues to play in ...

javascriptjqueryhtmlyoutubeoverlay

Issue with overlapping divs

My challenge involves two divs on opposite sides of the page that should move closer as the screen size decreases, with no space between them. However, I can't seem to prevent them from getting too close together, causing the links and information sec ...

htmlresizescrollscreenoverlap

Different ways to rearrange the placement of Export buttons in a personalized div or outside the table using Datatable

I would like to display the export buttons outside of the table. While searching on stackoverflow, I came across an example that uses the Select options method. You can find the example here. If anyone knows how to achieve this, please modify it and shar ...

javascripthtmldatatables

The CSS style is missing from the print preview

I've designed a style specifically for printing like this: #content .inner h2 { background: Red; border-bottom: solid 1px #dfdfdf; color: #000000; font-size: 20px; padding-left: 10px; } However, the red color doesn't show up in the print previe ...

css

The art of fluidly positioning elements in Bootstrap columns

My goal is to showcase objects in 3 columns using Bootstrap 4. However, when I implement the code provided, the objects are only displayed in a single column, as shown here: example of 1 column layout. What I actually want is for the objects to be arrange ...

cssangularjstwitter-bootstrapbootstrap-4

Styling for older versions of Internet Explorer (IE10 and earlier)

Could it be true that IE 10, 9, and others no longer support conditional statements? Is it also accurate to say that JQuery does not support the browser object above version 1.9? I am facing an issue with CSS rendering differently in Chrome and IE. A Goog ...

javascriptjqueryhtmlcssinternet-explorer

The presence of a CSS-only animation can disrupt the functionality of Bootstrap4's Navbar Toggler on mobile devices

I'm currently working on a CSS-only background animation project. The goal is to have images or colors moving from left to right in an infinite loop. The code I have works as intended, but I've encountered some issues on mobile devices (specific ...

cssanimationbootstrap-4

Insert an icon into a select tag and define a function that will be triggered upon selecting this

I am attempting to implement a "preview action" in my Vue.js 3 component. My approach involves the following: <select class="selectpicker"> <option @click='prueba($event)' data-content="<i class='fa fa-eye mr-5& ...

javascripthtmlbootstrap-4vuejs3

Can you explain the significance of network activity groupings within the Firebug Net tab?

Can you explain the significance of different splitter lines on the Net tab in Firebug? In this screenshot, line 1 and 2 appear to be grouped together. However, line 3 stands alone. What do these groupings represent? ...

javascriptajaxfirefoxfirebug

Tips for incorporating a smooth fade in and out effect into images within a Bootstrap 5 carousel

I'm currently working with a Bootstrap 5 carousel and trying to implement a transition effect where clicking the "next" arrow will smoothly fade out the current image before fading in the next one. This is necessary because the images in my carousel v ...

javascripthtmlcsscss-transitionsbootstrap-5

What is the most concise way to write this Xpath?

How can I retrieve the attribute value of an element using an absolute path like this: //*[@id="main"]/div[3]/div/div/div[3]/div[23]/div/div/div[1]/div/div/span/img I would like to know how to write code in relative xpath. Can you provide guidance on that ...

pythonhtmlselenium

Converting an HTML menu to a WordPress menu: A step-by-step guide

Hey everyone, I've got some code in my HTML file that's using the 320 Bootstrap WP theme. I've created a menu and it's working fine. However, the box above the menu isn't moving along with it from menu to menu. Any ideas on how to ...

javascriptjqueryhtmlwordpress

Adjust the CSS content using the data-content attribute to include line breaks

My current coding setup includes: <div id="mydiv" data-content="Loading..."></div> This is how I style it with CSS: #mydiv:after{ content: attr(data-content); height: 100%; opacity: 1; position: absolute; text-align: center; ...

javascriptjquerycss

Is there a way to conceal the scrollbar in the mobile view (on a mobile device or emulator) in a React application without disrupting the scrolling functionality?

I am looking to conceal the scrollbar on mobile devices throughout my app while still allowing users to scroll. I have attempted to hide the scrollbar using CSS properties like scrollbar, scrollbar-thumb, scrollbar-thumb:hover, and scrollbar-track. This ...

htmlcssreactjs

Adjust the input dimensions to match the length of the text upon loading

I have a jQuery code that is supposed to test the length of text in an input box when the page loads and adjust the size of the input box accordingly. However, I seem to be encountering some issues with my current approach: $("#emailSubject").attr('s ...

jqueryhtmlinput

The alternating colors in the sorting table are not visible due to the divs being hidden with the display set

I've come across a problem that has me stumped. So, there are two sorting filters on a table and one of them hides rows that don't apply, messing up the alternating colors. Take a look at the function that sorts and the CSS below. The issue is pr ...

javascriptjqueryhtmlcss